How do we go about overall page layout with a CSS grid?
- Eliot Muir
- Tyler Brown
Owned by Eliot Muir
In 2021 it feels like the CSS grid layout is the most straightforward tool for laying out divs with a grid and being able to span multiple rows and columns.
One can specify dimensions using absolute dimensions “px” or use the “fr” dimension which means relative dimensions. So it’s quite easy to make a large number of different layouts.
Here’s an example:
<html>
<head>
<link rel="stylesheet" href="COLcolumn.css">
</head>
<body class="COLcontainer">
<div class="COLheader">Header</div>
<div class="COLsidebar">Sidebar</div>
<div class="COLright">Right panel</div>
<div class="COLmain">Main panel</div>
<div class="COLleft">Left</div>
</body>
</html>and this is the contents of COLcolumn.css
/* fr is the flex box unit - means relative to other fr dimensions */
.COLcontainer{
display : grid;
grid-template-rows: 100px 1fr; /* first row 100px - second row takes the rest */
grid-template-columns: 100px 200px 1fr 300px;
}
.COLheader{
grid-column-start: 2;
grid-column-end: 5;
}
.COLsidebar{
grid-column-start: 1 ;
grid-row-start: 1;
grid-row-end: 3;
}
.COLright{
grid-column-start : 2;
grid-row-start: 2;
grid-row-end: 3;
}
.COLmain{
grid-column-start: 3;
grid-row-start: 2;
}
/* put red debug lines in */
* {outline: 1px red solid; }The grid-column-start says what column to begin from (first column is 1) and the grid-column-end says where to end.
