CSS Grid Layout Techniques

By: on Apr 29, 2022

These days I use CSS Grid Layout for the major structure of the page and flex for the inner layouts. So I wanted to put together some common examples of were grid can be really handy.

CSS Grid Layout is unique because it defines relationships in terms of size, position, and layer, between parts of a control built from HTML primitives.

Columns

This will auto flow columns like flex box.

<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;
	}
	.col-flow > div {
		background: var(--clr-example-one);
	}	
}

Example

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.

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: var(--clr-example-one);
}
.color-2 {
	background-color: var(--clr-example-two);
}

Example

Now we can play with overlaying shapes that are centered.

Example

<div class="shapes-a">
	<div class="shape-1a"></div>
	<div class="shape-2a"></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.

Example

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-1b"></div>
<div class="shape-2b"></div>
</div>
<div class="text-2a">
	<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;
}
}

Center text

Lets start with an image banner that has center text overlay. Using grid-column: 1 / 2; and grid-row: 1 / 2; we can easily center element overeach other.

<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;
}

Example

Lorem, ipsum dolor

While were looking at overlapping elements we can do some crate things with overlaying shapes and text.

<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;
}

Example

Lorem, ipsum dolor