DEV Community

Cover image for Web Layouts with CSS Grid: The Basics
Stephany
Stephany

Posted on

Web Layouts with CSS Grid: The Basics

What is CSS Grid?

CSS Grid is a technique in CSS that allows developers to create responsive web design layouts more easily and consistently across browsers. With CSS Grid, we can transform our elements from this layout:
Standard HTML Layout
to this:
CSS Grid Layout

What separates a good website from a bad website is the ability to structure the contents of your website in the most approachable way to your users. Your website should be clean with an easy-to-follow navigation system to contribute to a usable webpage layout.

A layout that is easy to follow will give the site’s visitor easy access to the valuable and important information on your website. When content is difficult to find on a webpage, visitors get agitated and choose to leave the site with the possibility of not returning.


Getting Started

Let’s begin! To create a grid, we’ll first need to create a <div> element with the class name grid. The <div> tag is used as a container that divides the HTML document into sections. We use <div> elements to group together HTML elements and apply CSS styles to many elements at once.

<div class="grid">

</div>
Enter fullscreen mode Exit fullscreen mode

Fantastic! This <div> element states that on our webpage, we have a designated section named grid. Now, it’s time for us to add items inside our grid that we’ll use to style. We’ll do this by adding smaller sections with <div> elements and give them individual IDs.

<div class="grid">
   <div id="item-1"> 1 </div>
   <div id="item-2"> 2 </div>
   <div id="item-3"> 3 </div>
   <div id="item-4"> 4 </div>
</div>
Enter fullscreen mode Exit fullscreen mode

At this point, we have one large container full of smaller containers that make up a grid. Let’s turn our container into a grid by modifying it in our CSS.

.grid {
    display: grid;
}
Enter fullscreen mode Exit fullscreen mode

Now, let’s see what our grid looks like:
No change to our elements

Because we haven’t defined any rows or columns in our grid yet, the elements will remain stacked on top of each other. Let’s change this by adding two new properties to our grid class: grid-template-columns and grid-template-rows.

.grid {
     display: grid;
     grid-template-columns: 100px 100px;
     grid-template-rows: 50px 50px;
}
Enter fullscreen mode Exit fullscreen mode

Each value provided to the grid-template-columns and grid-template-rows properties dictate how wide we want our columns (100px) and how tall we want our rows (50px). So now, our grid will look like this:

Adding rows and columns to our grid in CSS

Excellent! Let’s create a small gap between the elements in our grid by adding the grid-gap property:

.grid {
     display: grid;
     grid-template-columns: 100px 100px;
     grid-template-rows: 50px 50px;
     grid-gap: 10px;
}
Enter fullscreen mode Exit fullscreen mode

By adding the grid-gap property, we obtain the following result:
CSS Grid with rows, columns, and a gap between all elements


Position and Resizing

In addition to grid rows and columns, we also have grid lines that identify the start and end of a column.
Grid Lines

From the figure above, we can see that although we have 3 columns, we have 4 grid lines where:

  • Column 1 starts at line 1 and ends at line 2
  • Column 2 starts at line 2 and ends at line 3
  • Column 3 starts at line 3 and ends at line 4

To create multi-dimensional layouts, all we’ll need to do is modify where each element in our grid starts and ends. Let’s modify our layout so that the first item in our grid spans across all three columns.

In my HTML file, I'm going to create a <div> element with the class name grid that contains nine unique elements with matching ids inside:

<div class="grid">
     <div id=“item-1”> 1 </div>
     <div id=“item-2”> 2 </div>
     <div id=“item-3”> 3 </div>
     <div id=“item-4”> 4 </div>
     <div id=“item-5”> 5 </div>
     <div id=“item-6”> 6 </div>
     <div id=“item-7”> 7 </div>
     <div id=“item-8”> 8 </div>
     <div id=“item-9”> 9 </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Now that we've created all our elements in the HTML file, let's style our grid class by adding 3 columns that are 300px wide and 3 rows that are 300px tall. I’ve also specified that the first element in our grid should span over 3 entire columns by specifying which lines the column should start and end on with two new properties: grid-column-start and grid-column-end.

.grid {
   display: grid;
   grid-template-columns:300px 300px 300px;
   grid-template-rows:300px 300px 300px;
   grid-gap:15px;
}

#item-1 {
   grid-column-start:1;
   grid-column-end:4;
}
Enter fullscreen mode Exit fullscreen mode

Let's see how the styling above affects our grid:
Multi-dimensional CSS Grid Layout

Since we've styled the first element in our grid to span across all 3 columns, all the other elements in the grid have been pushed over to the next available column.

Another way to specify which grid lines an element should span across is with the shorthand grid-column property, which takes two values: the starting grid line and the ending grid line.

#item-1 {
   grid-column: 1/4;
}
Enter fullscreen mode Exit fullscreen mode

And that’s the basics of CSS Grid! Using the properties we’ve gone over, you now have the availability to create multi-dimensional layouts that will best suit your website. Let's look at another example with the same number of elements as the previous example, but with different CSS styling:

.grid {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 200px 100px 100px;
    grid-template-rows: repeat(5, 100px);
}

#item-1 {
    grid-column:1/3;
}

#item-4 {
    grid-column:2/4;
}

#item-5 {
    grid-column:1/4;
}

#item-9 {
    grid-column:1/4;
}

Enter fullscreen mode Exit fullscreen mode

The styling above produces the following grid:

Multi-dimensional Layout Example with CSS Grid


Thanks for reading this tutorial! If you want to learn more about CSS Grid, check out these awesome resources:

Top comments (2)

Collapse
 
cguttweb profile image
Chloe • Edited

Also cssgridgarden.com/ for interactive and fun way to learn

Collapse
 
sonawaneapekshit profile image
sonawaneapekshit

Thanks for sharing!!!