Why CSS Grid Is A Game Changer For Web Design

Moving to CSS Grids and Ceding Control to Browsers.

Web layouts over the years

Early days of the internet saw different hacking to present information because the web wasn't meant to be a creative arena. Even today, the presentation may have improved but things seem the same. Hacks include:-

  • Tables,
  • Floats,
  • Bootstrap and other similar frameworks

Now we have a means of doing a layout on the way that wan not possible. CSS grids.

CSS Grids Versus Flexbox

CSS grids and flexbox are complimentary so that we can build layouts that are truly native to the web. Grid and flexbox are like best friends. They are good on their own but together they can accomplish great things. Both based on container-child relationship.

What is CSS Grid?

CSS grid defines a two-dimensional grid-based layout system, optimized for user interface design. CSS grid operates on two dimensions.

CSS grid basic terminology

-Grid lines - To specify where we want our content to go. -Grid Tracks - The spaces between these grid lines. Either grid columns or rows. -Grid Cell - A single unit area of a grid. -Grid gap - Space between grids. Very important feature.

Grid works from the container in, other layout methods start with the item.

Examples: How to layout content in a three column layout with CSS grid.

inlineblock_item {

  display: inline-block;

  width: calc(100% / 3);

}

Grid is the only layout technique that establishes a relationship between rows and columns of grid items.

Properties on the grid container

There are three important properties that you must know to start CSS grids. These are grid-template-columns, grid-template-rows and grid-gap. They are used to specify the columns, the rows, and gap in between them. Here is an example with three columns, two rows and a space of 1em in between.

.grid1 {

  display: grid;

  grid-template-columns: 150px 150px 150px;

  grid-template-rows: 100px 100px;

  grid-gap: 1em;

}

Other new units, functions and properties of CSS grid

The fr Unit

Represents a fraction of the free space in the grid container. You can use this to design a layout that responds to different screens with a ratio. The following is an example of fr unit with three columns, where the second column will have the same width as the first and the second will have two times bigger width.

 .grid {

   display: grid,

   grid-template-columns: 150px 1fr 2fr;

 }

The minmax() function

Defines a size range for columns or rows in the grid. Now we can actually tell the browser our column will have a width between x and y. Then the browser will figure out exactly what the width should be.

Example:

 .grid {

     display: grid,

     grid-template-columns: minmax(200px, 1fr) 300px 300px;

 }

The repeat() function

To specify a large number of columns or rows that follow a similar pattern.

Example: To display a columns of 75px and 120px four times. Which will result in eight columns with 75px and 120px width.

.grid {

     display: grid,

     grid-template-columns: repeat(4, 75px, 120px);

 }

The auto-fill vs. auto-fit function

Allow browser to determine how many tracks to create depending on track size. The browser can be a better judgment of all the screen size it will experience than us. They both work similarly, but auto-fit collapses empty tracks.

repeat(auto-fill, 100px);

repeat(auto-fit, 100px);

Auto-fit enables us to design responsive grids without the need for media queries. The example below is a CSS grid that responsively collapses from four columns to three columns and two without any media query.

.grid {

   display: grid,

   grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));

 }

Properties to align your grid items

There are six properties to align items in your layout.

-justify-content, -align-content, -justify-self, -align-self, -justify-items, -align-items,

  • She goes in detail about each property, here is a link to refer these properties. https://drafts.csswg.org/css-align/

Subscribe for coding videos

Keep growing professionally with just three curated videos weekly.

We hate spam as much as you do.