Quick and Easy Introduction to CSS Grid for Beginners

Reading Time:
14
minutes

Have you heard about CSS grid? This is currently a very popular topics on web design scene, probably one of the most popular. It is also one of the most searched CSS features on CanIUse website. It is not a surprise. It is safe to say that CSS grid has the potential to cause a revolution in web design. In this tutorial, you will learn how to use this promising CSS feature to build your own simple layout. The future of web design arrived today. Let’s take a look at it!

Table of Contents:

Sass workflow and resets

Defining template areas

Putting it all together

Closing thoughts on CSS grid

Demo on Codepen
.

Briefing

Before we get any further, let’s talk about the environment for this tutorial. Or, what will you need to get the code running? This tutorial will not use any external framework or resources. Well, except one. This will be font awesome
. I used this font in order to show the icons for browser support and the heart icon in the footer. There is no other use of this font. So, you don’t have to use this font unless you want to use these (or other) icons.

Also I didn’t use any CSS stylesheet for resetting / normalizing CSS styles. This means that the only styles used are the styles you can see. The next thing are vendor prefixes. As you will notice, the CSS code contain no vendor prefixes. The reason is simple. Codepen allows to choose one of two plugins that take care about this. Then, code is prefixed automatically on the background. These plugins are autoprefixer and prefixfree.

You can see this option if you click on “Settings” button, in the Codepen header, and navigate to CSS tab. You may need to switch to “Editor view” via “Change view” button. Okay, what if you want to see the CSS code with all prefixes? Then, in “Editor view”, click on the button with down arrow (or angle) and click on “View Compiled CSS”. This will show you the Sass code compiled into CSS with all prefixes.

Lastly, let’s quickly address current support for CSS grid. Or, what browser will you need to make the code work? CSS grid will work, more or less, on IE +11, Edge +14, Chrome +57, Firefox +52, Opera +44 and Safari +10.1. Opera 43 and Chrome 49-56 require enabling “experimental Web Platform features” flag in chrome://flags
. In case of Firefox 51, use “layout.css.grid.enabled” flag.

HTML

The first part of this CSS grid tutorial is about setting up the HTML structure. This structure will contain a number of blocks – header, sidebar, main block and footer. These blocks will be wrapped inside div
element with class
“grid”. This will be the first element using CSS grid. Header
will contain only h1
tag with simple text. Sidebar ( aside
) will contain h2
tag with list
containing six links
. The main
block will contain eight cards ( article
). This will be the second element using CSS grid.

We will use CSS grid for main
block to distribute the cards evenly on different screen resolutions. Footer will contain list with six items showing current browser support for CSS properties related to CSS grid. And, footer will contain a short note. We can call this note epitaph. Below is the whole HTML structure we will need for this tutorial.

HTML:

Introduction to CSS grid

Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex quidem quis adipisci accusantium laboriosam quae voluptatem, nesciunt dolorum labore ipsa?

read more »

Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex quidem quis adipisci accusantium laboriosam quae voluptatem, nesciunt dolorum labore ipsa?

read more »

Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex quidem quis adipisci accusantium laboriosam quae voluptatem, nesciunt dolorum labore ipsa?

read more »

Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex quidem quis adipisci accusantium laboriosam quae voluptatem, nesciunt dolorum labore ipsa?

read more »

Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex quidem quis adipisci accusantium laboriosam quae voluptatem, nesciunt dolorum labore ipsa?

read more »

Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex quidem quis adipisci accusantium laboriosam quae voluptatem, nesciunt dolorum labore ipsa?

read more »

Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex quidem quis adipisci accusantium laboriosam quae voluptatem, nesciunt dolorum labore ipsa?

read more »

Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex quidem quis adipisci accusantium laboriosam quae voluptatem, nesciunt dolorum labore ipsa?

read more »

CSS (Sass)

Like in case of flexbox, there are many ways to approach this subject. There is the hard and the easy way. You can use flexbox with just a few lines of code. If you want to master it, you have to learn about a lot of CSS properties
. The same is true about CSS grid. Grid, too, comes with amount of new CSS properties and values. My goal is to show you the minimum effective dose, not to overwhelm you. I want to help you get started. So, I will do my best to keep this tutorial simple.

We will be using a small number of CSS grid-related properties. These properties are grid-template-areas
, grid-template-columns
, grid-template-rows
, grid-row-gap,
grid-column-gap
and display
with “grid” as value. You can find the rest of all properties and values in this Complete Guide to Grid
published on CSS Tricks. This guide also explains important terminology. So, if you find yourself in doubt, check this guide. You will probably find a solution. Now, back to the tutorial.

Sass workflow and resets

The first thing we will do is creating a few variables and one function to make our work easier and faster. If you are not familiar with Sass preprocessor, I highly recommend reading The Beginner’s Guide to Learn SassPart 1,Part 2andPart 3. This mini series will take you from basic of Sass to the most advanced topics and some tips & tricks. You will learn all you need to start using Sass at full-speed. Next, we will reset and add custom styles for html
, body
, a
and ul
elements.

Sass:

// Sass function for converting pixels to rems
@function remy($value) {
 @return ($value / 16px) * 1rem;
}

// Sass variables
$spacing: remy(16px);
$spacing-big: remy(32px);
$spacing-small: remy(8px);

//- Basic resets -//
html {
 font-size: 100%;
}

body {
 margin: 0;
 font: 16px / 1.414 Verdana, Arial, sans-serif;
 background-color: #f4f5f7;
}

a {
 $color: #212121;
 text-decoration: none;
 color: $color;
 transition: color .25s;

 &:focus,
 &:hover {
  color: lighten($color, 25%);
 }
}

ul {
 padding: 0;
 margin: 0;
 display: flex;
 list-style-type: none;
}

Enter the grid

That was easy intro. Now, let’s dive right into the CSS grid. We will use our grid
class to apply grid styles to the div
that wraps the whole page. First, we need to set display
property to “grid”. Then, we will set grid-template-areas
property to “’header’ ‘sidebar’ ‘main’ ‘footer’”. Each row contains element(s) inside the quotes. So, first row contains ‘header’, second ‘sidebar’, fourth ‘main’ and fifth ‘footer.’ This basically means that our grid will contain four rows stacked on top of each other.

Next, we will use grid-template-columns
property to specify how much space of the grid will each area in the row (think element like ‘header’) take. We want to keep it full-width so we will use “1fr” which stands for 1 fraction. After that, we will use grid-template-rows
with minmax()
CSS function to make sure the footer will always stick to the bottom. This will let the center of the grid remain flexbile and expand as screen allows while keeping header and footer at the same height.

In order to make this work, we will also need to set height
to “100vh” (viewport height). Next are some styles for reducing the max-width
of the grid and centering it. After that, we will use media query to target screen with higher than 768 pixels. When this happens, we will restructure the grid. From that moment, first row will still contain only ‘header’, second will contain ‘sidebar main’ and third will contain ‘footer’. We will also set g
rid-template-columns
will to 1fr 4fr.

This means that the first area (element) inside the quotes ( grid-template-areas
) will cover 1 fraction of the grid while the second will cover 4 fractions. In other words, we will split the grid into two columns (fractions). One will take 1/5 (1 fraction) of the space and the second 4/5 (4 fractions). Also, the duplicate header and footer areas (‘header header’ ‘sidebar main’ ‘footer footer’) in grid-template-areas
is not a mistake.

We are saying that we want these areas to fill both columns of the specific row. Or, this row should contain only header / footer and it should be full-width. Otherwise, header and footer would cover only one fraction or column. What if you want to split the grid into three columns?

Then, you can set grid-template-columns
to “1fr 3fr 1fr” (or any other fractions of the space). And, you will set grid-template-areas
to “’header header header’ ‘sidebar-left main sidebar-right’ ‘footer footer footer’”. Again, header and footer will be full-width. Sidebar-left and sidebar-right will both take 1/4 of the space and main will take 3/4. If you want header or footer to fill only 2 columns you will use “’header header’ ‘sidebar-left main sidebar-right’ ‘footer footer’”.

I know that grid-template-areas
and grid-template-columns
can be a bit tricky to understand. The best way to understand it is by trying different numbers of fractions along with adding / removing areas to see what will happen. Remember that you are dividing the grid into fractions. One more example. Let’s say you want to divide it into two halves. Then, set the grid-template-columns
to “1fr 1fr”. This means that first column with take 1/2 of the grid and second will take 1/2 as well.

Sass:

//- Set the grid layout -//
.grid {
 display: grid;
 grid-template-areas: 'header' 'sidebar' 'main' 'footer';
 grid-template-columns: 1fr;
 grid-template-rows: minmax(min-content, max-content)
  auto
  minmax(min-content, max-content);

 margin-right: auto;
 margin-left: auto;
 max-width: remy(1170px);
 min-height: 100vh;

 @media screen and (min-width: 768px) {
  grid-template-areas: 'header header' 'sidebar main' 'footer footer';
  grid-template-columns: 1fr 4fr;
 }
}

Defining template areas

By now, you may wonder, how the grid knows what area relates to which HTML element? Great question! The truth is that you have to specify it explicitly. If you want to use some element with grid-template-areas
as an area, you need to target this element and use grid-area
CSS property set to some name for that area. Don’t use spaces or quotes. You can use camelCase or dashes. For example, grid-area: header
, grid-area: footer
, grid-area: sidebar-left
or grid-area: sidebarRight
.

In our example, we used header
, main
, sidebar
and footer
as areas. This means that we need to use grid-area
for header
, main
, aside
and footer
with proper values.

Sass:

//- Define template areas -//
header {
 grid-area: header;
}

main {
 grid-area: main;
}

aside {
 grid-area: sidebar;
}

footer {
 grid-area: footer;
}

Creating second grid

There are a lot of styles to make the example for this tutorial look good. However, these styles are not necessary for learning about CSS grid. And, going over all the styles would take a lot of time. I will skip this code and stick only to what is directly related to CSS grid. Don’t worry, I will include the whole Sass code in the end. Now, let’s move to the second and last appearance of CSS grid in this tutorial. We can use grid to take our eight cards in the main area and create simple grid layout.

First, we will need to select the main
element and set its display
property to “grid”. We will use mobile-first approach
. This means that we will use grid-template-columns
and set it to “100%”. Meaning, the grid should contain one full-width column. Next, we will use grid-row-gap
and to create some spacing between rows. $spacing-big
variable is equal to 32px. This will be enough. After that, we can move beyond mobile screens.

We will create first media query targeting screens with width of 480px and wider. Inside this media query we will change set grid-template-columns
to “auto auto” (without quotes). This means that we want two columns with equal widths in each row. We will also use grid-column-gap
property and set it to $spacing
variable (16px). This will create 16px wide gap between columns. Another media query will target screens 992 and wider.

Inside this media query, we will set grid-template-columns
to “auto auto auto”, again without quotes. This will create rows with three cards with equal widths in each. Finally, let’s create one more media query for screen widths of 1200px and wider. This media query will change the value of grid-template-columns
to “auto auto auto auto”. Yes, you guessed it. We want to have four cards with the same width in each row.

Sass:

main {
 display: grid;
 grid-template-columns: 100%;
 grid-row-gap: $spacing-big;

 @media screen and (min-width: 480px) {
  grid-template-columns: auto auto;// 2 cards per line with equal widths
  grid-column-gap: $spacing;
 }

 @media screen and (min-width: 992px) {
  grid-template-columns: auto auto auto;// 3 cards per line with equal widths
 }

 @media screen and (min-width: 1200px) {
  grid-template-columns: auto auto auto auto;// 4 cards per line with equal widths
 }
}

Putting it all together

As I promised, here is the whole code for this tutorial. Keep in mind that it contains a lot of CSS used only for additional styling. If you want to replicate the design in this tutorial completely, use the code below. If you only want to practice with grid you can use only the snippets we discussed on the lines above. Also, if you want to see compiled CSS with all prefixes, take a look at the demo
on Codepen in “Editor view” and choose “View compiled CSS” on CSS editor tab.

Sass:

// Sass function for converting pixels to rems
@function remy($value) {
 @return ($value / 16px) * 1rem;
}

// Sass variables
$spacing: remy(16px);
$spacing-big: remy(32px);
$spacing-small: remy(8px);

//- Basic resets -//
html {
 font-size: 100%;
}

body {
 margin: 0;
 font: 16px / 1.414 Verdana, Arial, sans-serif;
 background-color: #f4f5f7;
}

a {
 $color: #212121;
 text-decoration: none;
 color: $color;
 transition: color .25s;

 &:focus,
 &:hover {
  color: lighten($color, 25%);
 }
}

ul {
 padding: 0;
 margin: 0;
 display: flex;
 list-style-type: none;
}

//- Set the grid layout -//
.grid {
 display: grid;
 grid-template-areas: 'header' 'sidebar' 'main' 'footer';
 grid-template-columns: 1fr;
 grid-template-rows: minmax(min-content, max-content)
  auto
  minmax(min-content, max-content);

 margin-right: auto;
 margin-left: auto;
 max-width: remy(1170px);
 min-height: 100vh;

 @media screen and (min-width: 768px) {
  grid-template-areas: 'header header' 'sidebar main' 'footer footer';
  grid-template-columns: 1fr 4fr;
 }
}

//- Define template areas -//
header {
 grid-area: header;
}

main {
 grid-area: main;
}

aside {
 grid-area: sidebar;
}

footer {
 grid-area: footer;
}

//- Header -//
header {
 padding-top: $spacing;
 padding-bottom: $spacing;
 margin-bottom: $spacing;
 background-color: #fff;
 box-shadow: 0px 2px 40px 0px rgba(0, 0, 0, 0.08);

 h1 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
 }
}

//- Navigation -//
aside {
 padding: $spacing;
 background-color: #fff;

 @media screen and (max-width: 767px) {
  padding-bottom: $spacing;
  margin-bottom: $spacing;
 }

 @media screen and (min-width: 768px) {
  margin-right: $spacing;
 }

 h2 {
  @media screen and (max-width: 767px) {
   display: none;
  }

  margin-bottom: $spacing-small;
  font-size: 14px;
 }
}

.nav {
 flex-direction: row;
 justify-content: center;

 a {
  font-size: remy(12px);
 }

 @media screen and (max-width: 767px) {
  hr {
   display: none;
  }

  li + li {
   margin-left: $spacing;
  }
 }

 @media screen and (min-width: 768px) {
  flex-direction: column;
  justify-content: flex-start;

  hr {
   margin-top: $spacing-small;
   margin-bottom: $spacing-small;
   margin-left: 0;
   width: remy(36px);
   height: 1px;
   background: #eee;
   border: 0;
  }

  li + li {
   margin-top: $spacing-small;
  }
 }
}

//- Main area -//
main {
 display: grid;
 grid-template-columns: 100%;
 grid-row-gap: $spacing-big;

 @media screen and (min-width: 480px) {
  grid-template-columns: auto auto; // 2 cards per line with equal widths
  grid-column-gap: $spacing;
 }

 @media screen and (min-width: 992px) {
  grid-template-columns: auto auto auto; // 3 cards per line with equal widths
 }

 @media screen and (min-width: 1200px) {
  grid-template-columns: auto auto auto auto; // 4 cards per line with equal widths
 }
}

//- Cards -//
.card {
 display: flex;
 flex-direction: column;
 padding: $spacing;
 background-color: #fff;
 box-shadow: 0 20px 20px rgba(0, 0, 0, .08);
 transition: all 250ms cubic-bezier(.02, .01, .47, 1);

 &:focus,
 &:hover {
  box-shadow: 0 30px 30px rgba(0, 0, 0, .16);
  transform: translate(0, -10px);
 }

 a {
  margin-top: auto;// Push link to the bottom of the card
 }
}

.card__heading {
 margin-top: 0;
 font-size: remy(18px);
}

.card__excerpt {
 font-size: remy(14px);
}

//- Footer -//
footer {
 margin-top: remy(24px);
 background-color: #fff;
}

.footer-support {
 padding-top: $spacing-big;
 padding-bottom: $spacing;
 display: flex;
 justify-content: center;

 li + li {
  margin-left: $spacing;
 }
 
 .browser-version {
  font-size: remy(14px);
 }
}

.epitaph {
 padding-top: $spacing-small;
 padding-bottom: $spacing;
 display: block;
 text-align: center;
}

.fa-heart {
 color: #e74c3c;
}

Closing thoughts on CSS grid

Congratulations! You’ve just made your first layout using CSS grid! I hope that it was easy for you to follow this tutorial and learn about this CSS feature. Are you still trying to wrap your head around some things we discussed? Use the code I wrote for this tutorial, or fork my pen on Codepen, and play with it. If you are not sure how some property works, play with it and try using different values. Also, take a look at that guide published on CSS tricks. Remember, it all comes to practice.

Thank you very much for your time.

稿源:Alex's blog (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 产品设计 » Quick and Easy Introduction to CSS Grid for Beginners

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录

登录

忘记密码 ?

切换登录

注册