Home Upgrade Search Memberlist Extras Hacker Tools Award Goals Help Wiki Follow Contact

HF Rulez the UniverseHF Rulez the Universe
Marsian Artist

CSS Grid Basic Introduction

Posted 10-19-2021, 09:09 AM
CSS Grid Basics

When Grid was introduced to CSS, it didn't take long for developers to realize how useful the new display property was.
Grid makes designing easier by using a two-dimensional layout made of columns and rows, in contrary to flexbox that only uses columns to map different sections. Let's have a look at how to use CSS Grid.

First, we create the wrapper that will hold our grid.

[Image: mYU2Tq4.png]

Now that we have the wrapper, let's write our CSS grid property.

[Image: JliojP4.png]

We use the display: grid property on the wrapper that will act as a grid-container. You can specify both the number of columns and rows we want the grid to have and their sizes.

This can be done using grid-template-columns and grid-template-rows. In this example I'm sectioning the page into 3 columns and 3 rows that each have a size of 33% and 25% of the body width and height respectively. Here's what the element inspector will show us:

[Image: QQ3T64o.png]

Each element inside a grid can be positioned using the grid-column and grid-row property.
We simply need to reference the column or row visible in the inspector view and indicate how many blocks we want our element to take up in the grid.

Let's create 5 div elements that will go inside our wrapper:

[Image: ldB66HL.png]

An element can take multiple columns and rows. If I want a navbar that takes up 100% of my 3 columned grid, I can specify it by writing: grid-column: 1/4 and setting the width of my nav element to 100%. This will let the navbar element take 3 column spaces.

Here's an example of positioning using the grid-column and grid-row properties:

[Image: l5RZ9Cc.png]

[Image: Z70joHN.png]

You can increase the spacing between each grid section by using grid-gap.
Example with grid-gap set to 1em.

[Image: jF9zRfn.png]

To align grid items on a column, you can use justify-items: start | end | center | stretch.
To align on a row, use: align-items: start | end | center | stretch.
To align the content of an item, you can use: justify-self: start | end | center | stretch.

center: align the content from the top of the grid area.
start: align the content in the center of the grid area.
end: align the content from the bottom of the grid area.
stretch: fills the top of the grid area.

You can also use repeat() to write less code, for our first CSS example:
grid-template-columns: repeat(3, 33%);
grid-template-rows: repeat(2, 25%);

HTML Code:
        <meta charset="utf-8">
        <link rel="stylesheet" href="styles.css">
        <div class="grid-container">
            <div id="nav"></div>
            <div id="left"></div>
            <div id="main"></div>
            <div id="sub"></div>
            <div id="footer"></div>

CSS Code:
body {
    width: 100%;
    height: 100%;
    margin: 0;

.grid-container {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, 33%);
    grid-template-rows: repeat(2, 25%);
    justify-items: center;
    grid-gap: 1em;

#nav {
    grid-column: 1/4;
    grid-row: 1;
    width: 100%;
    height: 55px;
    background-color: rgb(0, 0, 0);

#left {
    grid-column: 1;
    grid-row: 1/4;
    width: 30%;
    height: 70%;
    margin-top: 33%;
    background-color: rgb(134, 134, 134);

#main {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    height: 100%;
    background-color: rgb(94, 94, 94);
    color: white;

#sub {
    grid-column: 2;
    grid-row: 3;
    width: 80%;
    height: 80%;
    margin-top: 5%;
    background-color: rgb(114, 114, 114);

#footer {
    grid-column: 1/4;
    grid-row: 4;
    width: 80%;
    height: 80%;
    margin-top: 5%;
    background-color: rgb(51, 51, 51);

If you want to learn more, visit MDN - Grids