CSS Grid

Souhard Swami
Last Updated: May 13, 2022

Introduction

CSS Grid Layout is a powerful tool/system that permits two-dimensional layouts which are much flexible and offer more custom controls than conventional HTML tables and excel at dividing a page into major regions or also defining the relationship in terms of sizes, positions, and layers, between parts of the control built using the HTML primitives.

Like tables, grid layout enables one to align elements into columns and rows. The CSS Grid Layout offers one a grid-based layout system, with rows and columns, also making it much easier to design web pages without using floats and positioning. However, many more layouts are either possible or easier with CSS grid than they were with tables. For example, a grid container's child elements could position themselves, overlapping and layer, similar to CSS positioned elements.

 

Display Property Layout

 

An HTML element becomes a grid container when its display property is changed/set to grid or inline-grid. It defines the element as a grid container and establishes a new grid formatting context for its contents. All direct children of the grid containers are automatically grid items.

Values:

  • grid – generates a block-level grid
  • inline-grid – generates an inline-level grid

Source

 

Properties Controlling Parent Container:

 

Grid Columns -

 

Grid column tracks are created for each value that has been specified using the grid-template-columns property.

 

Source

.container {

  grid-template-columns1fr 2fr 1fr 3fr;

}

 

Source

 

Grid Rows -

Using the grid rows, it can create property row tracks for each value specified for grid-template-rows. This is similar to the grid columns property. These horizontal tracks formed in the grid items are called rows.

Source

 

.container {

  grid-template-rows1fr 1fr 1fr;

}

 

 

 

Source

Grid Gaps -

The grid-column-gap and grid-row-gap properties create gutters/spaces between columns and rows.

Grid gaps are only created between columns and rows and not along the edges of the grid containers 🙌.

 

.parent-container {

    grid-row-gap:    20%;

    grid-column-gap5em;

}

 

Gap size values can be non-negative length value (px, %, em, etc.)

 

Source

 

.container {

grid-gap100px 1em;

}

 

The grid-gap property is a shorthand for the grid-row-gap and grid-column-gap grid properties.

 

If two values are specified then, the first represents grid-row-gap and the second grid-column-gap.


 

 

Source

 

Properties Controlling the child containers:

The grid child container set of properties determine a grid item’s location within the grid by referring to specific grid lines. These can include grid properties for the child containers such as grid-columnsgrid-rows etc.

 

Grid-Column-Start and Grid-Column-End -

The grid-column-start and grid-column-end properties determine the item’s column-based locations within the grids.

.item {

  grid-column: <start-line> / <end-line> | <start-line> / span <value>;

}

 

Example:

 

.child-container {

    grid-column-start1;

    grid-column-end:   4;

}

Source

This sets a grid item to span more than one column track which can be done by setting the grid-column-end to a column line number that is more than one column away from grid-column-start.

 

Grid-Row-Start and Grid-Row-End -

The grid-row-start and grid-row-end properties (similar to the one that we saw above) determine the item’s row-based locations within the grids.

.item {

  grid-row: <start-line> / <end-line> | <start-line> / span <value>;

}

 

Example:

 

.child-container {

    grid-row-start1;

    grid-row-end:   4;

}

 

Source

Here the grid items span across multiple row tracks by setting grid-row-end to more than one-row track away.

 

F.A.Qs:

 

1) What are CSS grids?
CSS Grid Layout introduces a two-dimensional grid system to CSS. It can use grids to layout major page areas or small user interface elements.

2) What is the syntax of using CSS grids?
An HTML element becomes a grid container when its display property is set to grid or inline-grid.
 

.grid-container {

  display: grid;

}


3) What is the advantage of using the CSS grids?
The main advantage of working with grids is that it lets us properly separate the order of the elements present in the source from their visual presentation.

 

 

Key Takeaways

 

We wrote this guide to give you a reasonably brief and introductory overview of Grid; however, it doesn't pretend to be complete technical documentation. Be sure to check out the specs of Mozilla Developer Network and W3C for an even deeper dive.

Here are some other fantastic resources on CSS Grid:

Hope you liked this article on some of the most widely used CSS layout system, i.e. CSS Grids present over the internet. Do share your thoughts with us in the comments section below.

You can read this article for more introductory and comprehensive industry standardized material on CSS and web development. If you want to learn web development from scratch, then you can look out for this course.

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think