<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Layout</title>
<style>
/*
other sizing keywords
min-content, max-content, fit-content()
*/
/* minmax() */
.container {
display: grid;
/* how many column track will this create? */
grid-template-columns: 200px repeat(2, 1fr 2fr) 200px;
grid-template-rows: auto auto;
gap: 10px;
background-color: #ccc;
border: 1px solid black;
margin: 2px;
padding: 20px;
max-width: 40rem;
}
.box {
background-color: #fff;
border: 1px solid red;
}
</style>
</head>
<body>
<h1>WTF Grid Layout</h1>
<div class="container">
<div class="box">One</div>
<div class="box">One</div>
<div class="box">Two</div>
<div class="box">One</div>
<div class="box">fourth box</div>
<div class="box">Five element of Ninja is a movie</div>
</div>
</body>
</html>