CSS Grid; pathway to flawless and responsive layout.

INTRODUCTION

CSS Grid is a powerful layout system that allows the creation of complex grid-based layouts in web development. Prior to the emergence of Grid, CSS had used float and positioning to move items around a web layout which posed so many limitations. The ability of CSS Grid to enable efficient, flexible and responsive web design by providing a two-dimensional grid-based layout system makes it one of the most widely used layout tool. The CSS Grid offers a grid-based layout system equipping rows and columns, making it easier to design web pages without the mental stress of having to use floats and positioning. It is near impossible to design a website without employing layouts, this depicts to a large scale the importance of layout in web design and the power of CSS grid in executing this task. It however might seem a challenge getting the hang of this pivotal tool at the start, openness to learning and constant practice are the recipe to mastering this tool. This document covers the basics of CSS Grid, enough to equip a newbie with knowledge essential to design a simple web layout and get those with prior knowledge going. Grab your pen and Computer, get on with me on this learning adventure.

At the end of this article, you should be able to design this web layout using CSS Grid. Its HTML and CSS code have been produced right under it for easier understanding. You should feel free to refer back to it if faced with any difficulty.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Grid</title>
</head>

<body>

    <div class="container">
       <div class="header">Header</div>
       <div class="nav">Nav</div>
       <div class="main">Main</div>
       <div class="sidebar">Sidebar</div>
       <div class="ads">Ads</div>
       <div class="footer">Footer</div>
    </div>

</body>

</html>

CSS

        .container{
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;
            grid-gap: 1em;
            grid-template-rows: 100px 100px 100px;
        }

        .container div{
            padding: 20px;
        }

        .header{
            background-color: #bbb;
            grid-column: 1/4;
        }

        .ads{
            background-color: bisque;
        }

        .sidebar{
            background-color: antiquewhite;
        }

        .nav{
            background-color: aquamarine;
            grid-column: 1/2;
            grid-row: 2/4;
        }

        .main{
            background-color: cadetblue;
            grid-row: 2/4;
        }

        .footer{
            background-color: darkseagreen;
            grid-column: 1/4;
        }

I understand the code might seem a large chunk and quite incomprehensible, but I bet if you stick around till the end, you will be able to pull it of without breaking a sweat. Now let's dive into the dynamics;

GRID CONTAINERS

The grid container is an HTML element that dictates the overall structure of the grid. Factors that determine the overall structure of a grid layout includes the columns, rows and how items are placed within the grid.
An HTML element is styled as a grid container by assigning its display property to grid in CSS.

This is an HTML document showing the div element container and subsequent children div;

<!DOCTYPE html>

<html lang="en">
<head>
</head>
<body>
    <div class="container">
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
    </div>
</body>
</html>

*This container element is styled as a grid container;

        .container {
            display:grid;
            }

GRID ITEMS

**
A grid container contains grid items, in other words they are the child element of HTML element that behaves as container. Grid items can be wrapped in div tags

_ An image displaying the grid-container and grid-item in HTML
_
Take for added context, the grid container represents an Ice Cube Tray and the grid items, Ice Cubes. The grid container(Ice cube tray) defines the structure and layout while the grid items(ice cubes) are the elements positioned within that structure. I hope that better helps paint the picture.

GRID CONTAINER PROPERTIES

**
In CSS Grid, grid container properties are used to define the overall layout and structure of the grid. Here are some basic properties you can use to style a grid container:
- Grid-template-column
- Grid-template-rows
- Grid-gap

GRID-TEMPLATE-COLUMN

The Grid-template-column defines the number of columns or width in a grid layout.

        .container {
            display:grid;
            grid-template-column:1fr 1fr 1fr;
            }

The value is a space separated list where each value defines the width of the respective column. The value could take a wide range of units from pixels, fractional unit, percentage to a whole lot others.
Contextually, this can be likened to the number of columns present in an ice cube tray.

A simple layout with three columns of equal sizes.

GRID TEMPLATE ROW

The grid-template-rows property is used to specify the height of each row.

  .container {

            display: grid;
            grid-template-columns: 1fr 1fr 1fr ;
            grid-template-rows: 100px 50px ;
            grid-gap: 10px;

        }

The value is a space separated list where each value defines the height of respective row.

Grid-template-row property used to set height of row.
**

GRID-GAP

**
The grid-gap property is used to assign gap between columns and rows in the grid.

GRID ITEM PROPERTIES

CSS grid item properties are the several properties that is used to style and position grid items within a grid container.

Grid-column
Grid-row

GRID-COLUMN

The grid-column property is a shorthand for setting both grid-column-start and grid-column end properties. It allows you specify the starting and ending positions of a grid item within the grid columns. To place a grid-item in a column, you can refer to line numbers or use the keyword "span" to define how many columns the item will span.
Example, to make grid-item1 span the entire width;

.container>div:nth-child(1){
    grid-column:1/4;
}

This command will cause the column of the grid item to span column 1 through column 4, as shown below;

The numbering of the column and row lines might seem confusing, but fret not!, the image below explains the row and column lines.

Another Example to make item 6 span from column line 2 to 4

.container>div:nth-child(6){
    grid-column:2/4;
}

GRID-ROW

**
The grid-row property is a shorthand property for the grid-row-start and the grid-row-end properties and it is used to define on which row to place an item. This works similar to grid-column, the only difference is in that it spans the length o container instead of its width as regards grid-column.

CONCLUSION

**
Basically, CSS Grid is like a design genius for web layouts. The grid container is your magical playground where you define the layout with rows and columns. Then, the grid-items are like your design elements easily placed and styled within those rows and columns. It's a game changer for making stunning and organized web-pages. Get comfortable with the concept and practice often to master this tool.

Blog