How can we do a table like display with CSS grid?
- Eliot Muir
Owned by Eliot Muir
CSS grid makes it very flexible to show table like formatting of divs like so:
<html>
<head>
<link rel="stylesheet" href="TABLE.css">
</head>
<body class="TABLEcontainer">
<div class="TABLEheader">This is the heading.</div>
<div>100</div><div>Fred</div>
<div>100</div><div>Fred</div>
<div>100</div><div>Fred</div>
<div>100</div><div>Fred</div>
<div>100</div><div>Fred</div>
<div>100</div><div>Fred</div>
<div>100</div><div>Fred</div>
<div>100</div><div>Fred</div>
<div>100</div><div>Fred</div>
<div>100</div><div>Fred</div>
<div>100</div><div>Fred</div>
<div>100</div><div>Fred</div>
<div>100</div><div>Fred</div>
<div>100</div><div>Fred</div>
<div>100</div><div>Fred</div>
</body>
</html>and
.TABLEcontainer{
display : grid;
grid-auto-rows: 2em;
grid-template-columns: 1fr 1fr;
}
.TABLEheader{
grid-column-start: 1;
grid-column-end: 3;
}
.TABLErow{
grid-column-start: 1;
grid-column-end: 3;
}
.TABLEcontainer * {
text-align: center;
}
/* put red debug lines in */
* {outline: 1px red solid; }