Graphic Design Web Design SEO Web Development HTML & CSS JavaScript WordPress Eleventy Innovation Portfolio My YouTube Channel Speedlify Presenting Multi Grid Navigation Sounds Affordable & Reliable Golden Ratio Optimizations X-height

CSS Grid Techniques

By: on Apr 29, 2022

These days I use grid a lot more often than I use flex box and grid is one of my favorite thing about CSS. So I wanted to put together some common examples of were grid can be really handy. I will let the code speak for it set on this post.

Lets start with an image banner that has center text overlay.

Lorem, ipsum dolor

<div class="grid-banner">
<h1>Lorem, ipsum dolor</h1>
<img src="https://images.unsplash.com/photo-1531278520962-fcf47a2faea2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2532&q=80">
</div>
.grid-banner {
display: grid;
place-items: center;
color: white;
font-size: 38px;
}
.grid-banner > * {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.grid-banner > img {
aspect-ratio: 16/9;
object-fit: cover;
z-index: -1;
}

Now we can play with overlaying shapes and text.

Lorem, ipsum dolor

<div class="shapes">
<div class="shape-1"></div>
<div class="shape-2"></div>
</div>
.shapes {
display: grid;
}
.shapes > * {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
h1 {
color: white;
text-align: center;
padding: 3em 0 ;
z-index: 1
}
.shape-1 {
width: 100%;
height: 300px;
background-color: blue;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 76%);
z-index: -1;
}
.shape-2 {
width: 100%;
height: 410px;
background-color: green;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 56%);
z-index: -2;
}

Next is columns. This will auto flow columns like flex box.

Lorem, ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem, ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem, ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div class="col-flow">
<div>
<h2>Lorem, ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div>
<h2>Lorem, ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div>
<h2>Lorem, ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
@media (min-width: 45em) {
.col-flow {
display: grid;
grid-auto-flow: column;
gap: 21px;
}
}

Now lets flow columns, but set a minimum width size on the columns. This will auto flow each color as 1 fraction of the available space.

<div class="column-flow-min">
<div class="color-1"></div>
<div class="color-2"></div>
<div class="color-3"></div>
<div class="color-4"></div>
</div>
.column-flow-min {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
}
.column-flow-min > * {
height: 155px;
}
.color-1 {
background-color: lightgray;
}
.color-2 {
background-color: gray;
}
.color-3 {
background-color: dimgray;
}
.color-4 {
background-color: black;
}

Now we can play with overlaying shapes that are centered.

<div class="shapes">
<div class="shape-1"></div>
<div class="shape-2"></div>
</div>
.shapes-a {
display: grid;
grid-template-columns: 50px;
grid-template-rows: 420px;
justify-content: center;
}
.shape-1a {
width: 300px;
height: 300px;
background-color: blue;
z-index: 1;
}
.shape-2a {
position: relative;
top: 60px;
grid-column: 2;
width: 300px;
height: 300px;
background-color: green;
z-index: 2;
}

Now we can play with overlaying shapes in a two column with text in the second column.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div class="shapes-container">
<div class="shapes-col">
<div class="shape-1a"></div>
<div class="shape-2a"></div>
</div>
<div class="text-1a">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
@media (min-width: 45em) {
.shapes-container {
display: grid;
grid-template-columns: 60fr 40fr;
gap: 22px;
}
}
.shapes-col {
display: grid;
grid-template-columns: 50px;
grid-template-rows: 360px;
justify-content: end;
}
.shape-1b {
width: 300px;
height: 300px;
background-color: blue;
z-index: 1;
}
.shape-2b {
position: relative;
top: 60px;
grid-column: 2;
width: 300px;
height: 300px;
background-color: green;
z-index: 2;
}
.text-2a {
display: grid;
align-items: end;
}
@media (max-width: 45em) {
.shapes-col {
justify-content: center;
}
}