Embedded Files
A combination of Flexbox and Grid
A combination of Flexbox and Grid
<style>
#layout {
display: grid;
grid-template-rows: 100px 400px 100px;
grid-template-columns: 200px 500px 200px;
text-align: center;
}
#box {
display: flex;
justify-content: center;
align-items: center;
}
div {
border: 1px black solid;
}
</style>
<div id="layout" style="border: 1px black solid;">
<div id="box">One</div>
<div id="box">Two</div>
<div id="box">Three</div>
<div id="box">Four</div>
<div id="box">Five</div>
<div id="box">Six</div>
<div id="box">Seven</div>
<div id="box">Eight</div>
<div id="box">Nine</div>
</div>
This is how it looks in a web browser:
Several boxes in a 5 by 5 grid
Several boxes in a 5 by 5 grid
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: pink;
}
.parent {
display: grid;
grid-template-columns: repeat(5, 100px);
grid-template-rows: repeat(5, 40px);
grid-column-gap: 2px;
grid-row-gap: 2px;
}
div div {
display: flex;
justify-content: center;
align-items: center;
}
.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 2 / 2 / 3 / 3; }
.div3 { grid-area: 3 / 3 / 4 / 4; }
.div4 { grid-area: 4 / 4 / 5 / 5; }
.div5 { grid-area: 5 / 5 / 6 / 6; }
.div6 { grid-area: 5 / 1 / 6 / 2; }
.div7 { grid-area: 4 / 2 / 5 / 3; }
.div8 { grid-area: 2 / 4 / 3 / 5; }
.div9 { grid-area: 1 / 1 / 2 / 4; }
.div {border: 1px solid red;
background-color: lightblue;
height: 40px;}
</style>
<body>
<div class="parent">
<div class="div1 div">Div1 </div>
<div class="div2 div">Div2 </div>
<div class="div3 div">Div3 </div>
<div class="div4 div">Div4 </div>
<div class="div5 div">Div5 </div>
<div class="div6 div">Div6 </div>
<div class="div7 div">Div7 </div>
<div class="div8 div">Div8 </div>
<div class="div9 div">Div9 </div>
</div>
</body>
</html>
This is how it looks in a web browser:
3. Default layout of boxes in a Grid
3. Default layout of boxes in a Grid
<!DOCTYPE html>
<html>
<head>
<style>
#layout {
display: grid;
grid-template-rows: repeat(6, 50px);
/* grid-template-rows: repeat(auto-fill, 50px); */
grid-template-columns: 200px 300px 200px;
width: 700px;
height: 300px;
background-color: grey;
}
div {
border: 5px solid green;
}
div div {
border: 1px solid red;
background-color: lightblue;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<body>
<div id="layout">
<div>Cell 1</div>
<div>Cell 2</div>
<div>Cell 3</div>
<div>Cell 4</div>
<div>Cell 5</div>
<div>Cell 6</div>
<div>Cell 7</div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
This is how it looks in a web browser:
Report abuse