What is CSS Grid?

CSS Grid is a two-dimensional layout that you can use for creating responsive items on the web. The Grid items are arranged in columns, and you can easily position rows without having to mess around with the HTML code.

Features of CSS Grid Layout

Flexible Track Sizes

You can use the fr unit (Fraction Unit) to assign any specified pixel value to the grid. This will make your grid organized and responsive.

Item Placement

CSS grid has made it much easier to position items in the container in any area you want them to be without having to mess with the HTML markup.

Alignment Controls

The alignment of an element/item in a container is easier than ever before with CSS Grid. In the container, you can now arrange elements/items horizontally and vertically as you wish.

Benefits of CSS Grid

CSS Grid is very flexible and responsive. It makes it easy to create two-dimensional layouts. CSS Grid also easy to use and is supported by most web browsers.

The CSS grid makes your mark-up cleaner (in your HTML code) and gives you a lot more flexibility. This is partly because you don’t have to change the mark-up (HTML code) to change the position of an item using the CSS grid.

All in all, CSS Grid Layout helps us build a more complex layouts using both columns and rows.

When Should You Use CSS Grid

Although you can use CSS Grid in practically any aspect of web development, there are certain situations when it's ideal.

For example, when we have a complex design layout to implement, CSS Grid is better than the CSS float property. This is because Grid is a two-dimensional layout (with columns and rows), whereas the CSS float property is a one-dimensional layout (with columns or rows).

Grid is also a good choice when we need a space or gap between elements. By using the CSS grid gap property, the spacing of two elements is much easier than using the CSS margin and padding properties which might end up complicating things.

CSS Grid Properties

The CSS grid layout consists of many grid properties. Let's see all the grid properties.

Properties for the parent (Grid container)

1. display

Defines the element as a grid container and establishes a new grid formatting context for its contents.

Values:

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

  .container {
  display: grid | inline-grid;
  }
  

2. grid-template-columns and grid-template-rows

These properties are used to declare the number of grid we want by providing the grid layout width and height by using both column and row templates

grid-template-columns By using this property we can set the width of the each column if we mention the 100px then the column width will be 100px we can use other units as well.

grid-template-rows By using this property we can set the height of the each column. grid height can be set using this property

3. grid-template-areas

This property is used to set the column and row distribution of the particular column by setting names to the items. After we applying the columns and rows by using the grid-template-area property we will set the area distribution of the rows and columns by setting the names as per the requirement after setting names we simply assign the names to the children items by targeting them and assigning. see the below codepen to see the code and how it is actually working. grid-area is the property which is used to assign the names to children items. more about grid-area is explained in the Properties for the children Elements section of the article.

4. gap properties

column-gap

This property is used to give the column gap between the grids. It is really easy to understand these properties by using this property we can apply the gap outside the grid.

row-gap

This property is used to give the row gap between the grids. By using this property we can apply the gap outside the grid.

gap

This is the shortcut property for assigning the column and row gaps. By using this we can give the both values to the gap property. checkout the below codepen to see these properties in action.

5. justify-content and align-content

justify-content is used to align the grids in horizontal direction based on the property values. grids will be arranged in the horizontal.

align-content is used to align the grids in vertical direction based on the property values. grids will be arranged in vertical direction.

6. justify-items and align-items

justify-items is used to align the content inside the grid in the horizontal direction. Remember this property is different from justify-content.

align-items is used to align the content inside the grid in the vertical direction. Remember this property is different from align-content.

Properties for the Children Elements

Before starting with these properties we should understand the row and column numbering of the grid layout. See the below picture to get an idea about the grid layout row and column numbering. We can also use negative indexing from the end which starts from end. also remember these are used in children elements.

1. grid-column-start and grid-column-end

grid-column-start is to specify the start index or column number of the grid from where the grid area distribution should start.

grid-column-end is to specify the end index or column number of the grid to where the grid area distribution should end.

grid-column This is the shortcut Property to specify the start and end index or column numbers for the given children element. .item1{ grid-column-start: 1; grid-column-end: 3; / above code output will be same as the below code snippet / grid-column: 1 / 3; }

2. grid-row-start and grid-row-end

grid-row-start is to specify the start index or row number of the grid from where the grid area distribution should start.

grid-row-end is to specify the end index or row number of the grid to where the grid area distribution should end.

grid-row This is the shortcut Property to specify the start and end index or row numbers for the given children element.

.item3{
    grid-row-start: 2;
    grid-row-end: 4;
/*  above code output will be same as the below code snippet */
    grid-row: 2 / 4;
}

Check the below codepen to see how these properties are working.

3. grid-area

grid-area is used with the combination of the grid-template-areas . This property is used to assign the names to the items in the container based on the assigned names children items distribution area will be changed.

4. justify-self and align-self

justify-self is used to align the selected item in the horizontal direction in the grid. Remember this is used for children elements based on the values horizontal alignment of the element will be changed based on grid position.

.item1{
    justify-self: center;
    justify-self: stretch;
    justify-self: end;
    justify-self: start;
}

align-self is used to align the selected item in the vertical direction in the grid. Remember this is used for children elements based on the values vertical alignment of the element will be changed based on the grid position.

.item2{
    align-self: flex-end;
    align-self: flex-start;
    align-self: center;
    align-self: stretch;
}

These two properties are used to align items relative to it's grid position.

5. order

This property is used to give order to the items in the container default will be 0 for every children items based on the numbering arrangement of the items will be changed. We can use negative and and positive values to the order property.

.item4{
    order: 2;
}

Important Units and Functions fr units This is the fractional unit which takes the portion of the available space means when we mention 1fr it means it will take 1 portion of the available space it depends on the total fractions if there is only 1 fraction than total available space (100%) is taken if there are 4 fractions than each fraction takes 25% of available space.

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

repeat() and minmax() repeat() this function is used when we want same to apply same size for multiple rows or columns in the parenthesis we can pass two values first one is the number of repeated rows or columns sizes we want and the second one is the size we can use fr , px or % as the units.

.container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}
/* above code output will be same as the below code */
.container{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(3,1fr);
}

Thanks for reading and if this blog got helpful to you then please like and share...