Css Grid

The CSS grid is a newer standard that makes it easy to build complex responsive layouts. It allows you to turn an HTML element into a grid(rows and columns), and lets you place child elements anywhere within.

1. Turning HTML into Grid

Turning an HTML element into grid is easy. You just have to set the display to grid. In the grid system, the parent is referred to as container and the children are called items.

.container{
     display: grid;
}

2. Adding Columns and Rows With Grid

To add columns you need to use the grid-template property. It is used to create rows or columns.

To Add Columns

.container{
    display: grid;
    grid-template-columns: 50px 50px; 
}

To Add Rows
.container{
     display: grid;
     grid-template-rows: 50px 50px;
}

To avoid repetition. The code below will create50 rows each 50px tall.
.container{
     display: grid;
     grid-template-rows: repeat(50, 50px);
}

The above code will create two columns/rows 50px each. The number of parameters in front of the grid-template-column/rows property indicates the number of columns/rows you want.

3. CSS Grid Units

After setting your display to grid. The items in the container are automatically aligned.You can use the usual units on grid like px and em to show how you want them to be. There are also grid units like

fr:sets the column or row to a fraction of the available space.

auto: sets the column or row to the width or height of its content automatically.

%adjusts the column or row to the percent width of its container.

.container{
     display: grid;
     grid-template-columns: auto 50px 10% 2fr 1fr;
}

The above code has 5 columns in which the first one is as wide as it's content, the second 50px, the third is 10% of it's container, and for the last two columns; the remaining space is divided into three sections, two are allocated for the fourth column, and one for the fifth.

4. Grip Gap

The grid gap template is used to create gaps or spaces between rows and columns.

To Add gaps between columns
.container{
     display: grid;
     grid-template-columns: auto 50px 10% 2fr 1fr;
     grid-column-gap: 10px;
}

To Add gaps between rows
.container{
     display: grid;
     grid-template-columns: auto 50px 10% 2fr 1fr;
     grid-row-gaps: 10px
}

To Add gaps between rows and columns
.container{
     display: grid;
     grid-template-columns: auto 50px 10% 2fr 1fr;
     grid-gap: 10px;
}

The above code will create a gap of 10px between your columns and rows

5. Control Spacing

This is used on the items(the children). It is used to control the numbers of rows or columns an item will consume. It consists of two properties. The start and the end.

For column
.item{
   grid-column: 1/3;
}
For row
.item{
   grid-row: 1/3;
}

The above code tells the item to start from column/row 1 and stop before column/row 3, consuming two columns/rows.

6. Align items/Justify items in CSS Grid

In CSS Grid, the content of each item is located in a box which is referred to as a cell. The CSS Grid accepts the properties below for alignment.

start:allows items to be positioned at the start/left of the cell

end:allows items to be positioned at the end/right of the cell

center:allows items to be positioned in the center of the cell

stretchthis is the default and it allows items to fill the whole width of the cell

To align all items on the column/vertically
.container{
     align- items: start | end | center | stretch
}

To align all items on the row/horizontally
.container{
     justify- items: start | end | center | stretch
}

To set both the align-item and justify-item at once. This contains two values. If the second value value is not specified, the first value will be used for both.
.container{
     place- item: start/end
}

If the total size of your grid is less than the container, use justify-content to align in row and align-content for column
.container{
     justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
.container{
     align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
Use place-content to align both rows and columns. It has two values.
.container{
     place-content: start/end | end/center | center | stretch | space-around | space-between | space-evenly;
}

To align a particular item in a container vertically/column
.item{
     align- self: start | end | center | stretch
}

item{
     justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

To align a particular item in a container horizontally/row
.item{
     justify- self: start | end | center | stretch
}

If you find this helpful, leave a reaction, comment and share.

Vikkybliz Codes