We want flexibility for three to 4 columns with control over their width and ability to change the size of the page. We’re willing to not support Microsoft Browsers prior to edge.
Support
Chrome, Edge (basically Chrome)
Safari
FireFox
What are the different possible solutions:
...
https://www.w3schools.com/css/css3_multiple_columns.asp
Gut reaction - seems very hard coded and not working from fundamentals.
...
CSS which mimics table layout
Gut reaction - seems complicated and obscure
...
Chain things together
float property
fancy selectors that depend on order
...
Flex box stuff https://www.w3schools.com/css/css3_flexbox_container.asp
...
Third party libraries like bootstrap
Bleah. - opaque and unmaintainable.
Use CSS to remove the box model padding etc. so that 33% of width is actually 33% of the size of the retaining box.
...
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:
| Code Block | ||
|---|---|---|
| ||
<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
| Code Block | ||
|---|---|---|
| ||
/* 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.