A Quick Introduction to CSS Grid

#css #beginners #webdev #codenewbie

Introduction

In this article, I will be covering the basics of CSS Grid, defining what it is and how to get started with it. This is to aid my own learning and hopefully give something quick and useful back to the community.
Follow along as I break down this awesome bit of technology! 😄

What is CSS Grid?

CSS Grid gives you the ability to divide a given section into a bunch of rows and columns, hence the name CSS Grid. This is useful when building layouts, because you can position elements in any area of the grid, by specifying where you want the item to go in your CSS.

Getting Started with CSS Grid

To get started, you need a parent container which you'd apply a special property to, to activate the Grid. Any items that you want to be a part of this Grid are then placed within this parent container.

<div class="container">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
</div>

.container {
  display: grid;
 }

To activate the Grid, we apply the display property with the grid value. This tells the browser that we want the specified container to be a Grid, that's it.
This then allows us to use a bunch of different properties associated to CSS Grid to start building our layout.

CSS Grid Properties

grid-template-columns: Specify the size and number of columns
grid-template-rows: Specify the size and number of rows

Example Usage

.container {
    ...
    /* Defining two columns with the size of 60px */
    grid-template-columns: 60px 60px;
}

When using these properties, you are explicitly defining the Grid, meaning that you are defining exactly how the Grid should behave.

If we defined our columns without specifying any rules for the rows, CSS will implicitly create the rows for us, depending on the size of the elements.

grid-gap: Create some space between the different rows and columns of the Grid

Example Usage

.container {
    ...
    /* Create 10 pixels of space on the top and bottom of each Grid element,
    and 20 pixels of space on the left and right sides. */
    grid-gap: 10px 20px;
}

grid-auto-rows: Defines the size of implicitly created rows
grid-auto-columns: Defines the size of implicitly created columns

Example Usage

.container {
    ...
    grid-auto-columns: 1fr;
}

Using the example above, what happens when we define this property is that any other columns that are added to the Grid, implicitly, will use up 'one free space' available on the page automatically. Note: fr does not stand for free space, but it's a neat way to think of how this unit works.

grid-column (shorthand)
grid-row (shorthand)

grid-column is shorthand for the following properties:

grid-column-start
grid-column-end

grid-row is shorthand for the following properties:

grid-row-start
grid-row-end

The -start properties tells the Grid where to initially place an item, and the -end properties tells the Grid at which point the element to be placed should stop at.

The value you specify refers to the Grid Line. Thinking of a square box, the line on the left would be Line 1, and the line on the right would be Line 2.

Example Usage

.container {
    ...
    /* Start at column line 2, end at column line 4*/
    grid-column-start: 2;
    grid-column-end: 4;

    /* Shorthand */
    grid-column: 2 / 4;
}

Grid Template Areas

Grid Template Areas are a way to name the different sections of the Grid. The property used is called grid-template-areas. Below is the basic syntax for its usage:

.container
{
 grid-template-areas:
      "sidebar-1 content sidebar-2"
}

The syntax roughly follows the structure of the actual Grid. So, the first three columns that are present will be called sidebar-1, content, and sidebar-2 respectively.

To continue defining the other areas of the Grid, such as rows below it, you continue on a new line with either the same name to define a whole area, or a new name to identify a new section of the grid.

.container
{
 grid-template-areas:
      "sidebar-1 content sidebar-2"
      "sidebar-1 content sidebar-2"
      "footer footer footer";
}

Using your pre-defined class names for each of the elements on the page, you can use the Grid Template Area names to define where to place such elements. An example is shown below:

.footer
{
    grid-area: footer;
}

.item1
{
    grid-area: sidebar-1;
}

.item2
{
    grid-area: content;
}

.item3
{
    grid-area: sidebar-2;
}

This is saying that, for each item selected, place it in the defined area of the grid that we have specified. The element being placed will naturally position itself into the named section of the grid, using grid-area.

Conclusion

This was a very quick introduction to CSS Grid, as I wanted to summarise the basic concepts I learned through the following resources:
Wes Bos: CSS Grid Course
Mozilla Developer Network: CSS Grid Layout

Thank you for reading 👋! If you're interested in following me on my Web Development journey, follow me on Instagram and Twitter 😄