CSS Grids

Introduction

While the CSS Flexbox works one-dimensionally, either vertically or horizontally, CSS Grids can work two-dimensionally simultaneously. This allows you to create more advanced layouts using the single system.

CSS Grids is so-named because it’s based on the idea of a grid running horizontally and vertically across and down the screen. We can use CSS Grids to determine how many horizontal and vertical spaces in the grid each element should take up.

Important Concepts

Grid Container

• To get started using CSS Grids, you need to create what is called the grid container.
• To do this, set display: grid on a parent element.
• This will allow you to use CSS Grids to create rows and columns inside of that element.

Grid Item

• A grid item is one of the direct child elements to the grid container.
• These are the items that will take up space in our grids.

Gap

• The gap property is used to set the space between columns and rows in the grid.

Grid-template-columns and rows

• To control the size of rows or columns you use grid-template-columns and grid-template-rows.

	<section class="container">
	  <div>
	    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec scelerisque bibendum enim.</p>
	  </div>
	  <div>
	    <p>Sed convallis malesuada nisl, id laoreet nulla vulputate nec.</p>
	  </div>
	  <div>
	    <p>In varius ac ipsum in interdum.</p>
	  </div>
	  <div>
	    <p>
	      Vivamus ornare pretium mauris, tristique vulputate ex porttitor non. Nullam mattis lorem mattis fermentum
	      pulvinar.
	    </p>
	  </div>
	</section>

	.container {
	  display: grid;
	  grid-template-columns: auto 1fr;
	  grid-template-rows: 1fr auto;
	  grid-gap: 10px;
	  min-height: 400px;
	}
	
	.container div {
	  background: lightblue;
	}

• The CSS above creates a grid container with two columns. The first column is set to auto and the second column is set to 1fr.
• The grid container also has two rows. The first row is set to 1fr and the second row is set to auto. It’s important to see the min-height which allows us to see the row heights.

ℹ️ INFO

Note: By setting a column or a row to auto, the column or row will take up as much space as it requires on the page. When using the 1fr, the column or row takes up the remaining available space left over.

Grid-template-areas

One of the greatest aspects of CSS Grids is the ability to create grid areas. Especially useful is that the syntax (how the CSS is written) is how it will appear on the page.

If you had a <header>, <nav>, <main>, <footer> in your HTML, you could set these areas as a grid area.

	<header>
	  <h1>Welcome to My Website</h1>
	</header>
	<nav>
	  <ul>
	    <li><a href="index.html">Home</a></li>
	    <li><a href="about.html">About</a></li>
	    <li><a href="contact.html">Contact</a></li>
	  </ul>
	</nav>
	<main>
	  <h2>This site is about a topic</h2>
	  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	  <p>Donec scelerisque bibendum enim. Sed convallis malesuada nisl, id laoreet nulla vulputate nec.</p>
	</main>
	<footer>&copy; Copyright</footer>

	header {
	  grid-area: myheader;
	  background: orange;
	}
	nav {
	  grid-area: mynav;
	  background: lightblue;
	}
	main {
	  grid-area: mymain;
	  background: lightgreen;
	}
	footer {
	  grid-area: myfooter;
	  background: yellow;
	}
	
	body {
	  display: grid;
	  grid-template-areas:
	    'myheader mynav'
	    'mymain mynav'
	    'mymain myfooter';
	}

• Note that the grid-area property is used to create the area, and the developer decides the value, for example, myheader, mynav etc.
• With the grid areas defined, we can use grid-template-areas to arrange our content into rows and columns.

📄 DOCUMENTATION

MDN docs on CSS grids: CSS Grid Layout.

Activities

Activity 1

💻 WATCH

This tutorial video on CSS grids. (8m 38s)

Activity 2

📖 READ

A Complete Guide to Grid by CSS Tricks, use this as a reference guide. You might find it difficult to read it all in one go, so read a bit and then experiment and come back to it.

Activity 3

💻 WATCH

Video: Build a Classic Layout FAST in CSS Grid (8m 29s)

Lesson Task

Brief

There are practice questions in the master branch of this repo.

Attempt the answers before checking them against the answers in the answers branch of the repo.