Grid for layouts
A two dimensional layout system: rows and columns.
Works on children
Many of the grid properties are applied to the parent element, but affect the child elements.
This is different from many other CSS properties that directly affect the selected element.
HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
CSS ul {
list-style-type: none;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: .25rem;
}
HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
CSS ul {
list-style-type: none;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas:
"box1 box1 box1"
"box2 box3 ."
"box2 box4 .";
}
HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
CSS li:nth-child(1) {
grid-area: box4;
}
li:nth-child(2) {
grid-area: box2;
}
li:nth-child(3) {
grid-area: box1;
}
li:nth-child(4) {
grid-area: box3;
}
HTML
<div>
<h1><img src="images/mars.svg" alt="Mars"></h1>
<img class="pano" src="images/pano.jpg" alt="" role="presentation">
</div>
CSS div {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
}
img {
width: 100%;
}
h1 {
margin: 0;
grid-column: 1 / 2;
grid-row: 1;
align-self: end;
z-index: 1;
}
.pano {
grid-column: 1 / -1;
grid-row: 1;
}
HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
CSS ul {
list-style-type: none;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
}