CSS Grid

CSS grid is a two-dimension layout system that makes beautiful layouts for our webpages by arranging elements into rows and columns. We can place elements at precise locations, using a grid we can control or add rows and columns. We can create a grid container by assigning display property as grid or inline-grid.

1. grid-template-columns: The arrangement of child elements of grid containers into columns. We define the width of each column and the total number of columns.

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

• child elements of grid-box will be arranged into four columns each of 50px width.

2. grid-template-rows: The arrangement of child elements of grid containers into rows. We define the width of each row and the total number of rows.

eg: .grid-box {
display: grid;
grid-template-rows: 100px 100px;
}

• we will have two rows of child elements each of 100px width. The combination of grid-template-columns and grid-template-rows is used to create a matrix-like layout in our webpages.

3)justify-content: like flexbox grid also has justify-content property used to align grid columns horizontally and distribute space between and around the elements.

a) start: left-justified

b)center: centered

c)space-evenly: The items are evenly distributed within parent elemenet

d)space-around: equally space distribution surrounding the box

e)space-between: maximum space possible between two elements

4)align-content: This property is used to vertically align the grid inside parent container.

a) start: move the grid in top of container

b)center: Rows are positioned in center of container

c)space-evenly: The grid rows are evenly distributed within parent elemenet

d)space-around: equally space distribution surrounding the box rows

e)space-between: maximum space possible between two rows

f)end: move the grid in bottom of container

5)grid-column: This is used to specify a grid element on which column to start from and where to end.

eg:box {
grid-column: 1 / 7;
}

• This box element will start on column 1 and end in column 7

6)grid-row:Same as grid column but deals with rows.

7)grid-area:It is short hand for grid-row-start, grid-column-start, grid-row-end and the grid-column-end

eg:.box{
grid-area: 1 / 3/ 5 / 7;
}

• box element start on row-line 1 and column-line 3 and end on row-line 5 and column line 7

8)grid-gap: This is used to define gap between grid blocks or can say grid line.

9)grid-auto-rows: is used to set size of rows in grid display.

• auto:size of row is decided by size of largest block.
• max-content: size of each row to depend on the largest item in the row
• min-content: size of each row to depend on the largest item in the row

10)grid-auto-columns: This property is used to set size of column in grid display.