CSS Grid

What is CSS Grid?

CSS Grid is a layout system similar to flexbox which allows us to create two-dimensional layouts with rows and columns. CSS Grid can help us design web pages more easily and efficiently, without having to rely on floats, positioning, or hacks.

Different Grid properties for Parent Elements

display

This property is used to arrange the items in an container in either inline or block depending on the value and element. It helps in taking the only space where the content is then using other properties we can set the direction and other properties. This property is set to flex while using flexbox layout model without this other properties won't be working.

.container
{
    display:grid;
}

grid-template-columns & grid-template-rows

grid-template-columns & grid-template-rows properties are used to set the width & height of grid elements.

grid-template-areas & grid-area

This property allows you to name the grid areas and assign them to specific grid cells. You can use the dot (.) character to create empty cells.

You can also use the grid-area property to assign a name to a grid item and place it in a particular area as shown in below example.

gap properties

row-gap & column-gap are used to give gap between row & column grids.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px;
  row-gap: 20px;
  column-gap: 20px;
}

gap is the shortcut to apply both row & column gap.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px;
  gap: 20px 20px;
}

justify-content & align-content

justify-content : This property is used to align the grids in horizontal direction.

align-content : This property is used to align the grids in vertical direction.

.container {
  display: grid;
  height: 400px;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px;
  justify-content: center;
  align-content: center;
}

justify-items & align-items

justify-items : This property is used to align the content inside the grid in the horizontal direction.

align-items : This property is used to align the content inside the grid in the vertical direction.

.container 
{
  display: grid;
  height: 400px;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px;
  justify-items: flex-start;
  align-items: flex-start;
}

Different Grid properties for Child Elements

grid-column-start and grid-column-end

grid-column-start is used to specify the starting index or column number of the grid.

grid-column-end is used to specify the ending index or column number of the grid.

grid-column is the shortcut property for both grid-column-start & grid-column-end

.box1
{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-column: 1 / 3;
}

grid-row-start and grid-row-end

grid-row-start is used to specify the starting index or row number of the grid.

grid-row-end is used to specify the ending index or row number of the grid.

grid-row is the shortcut property for both grid-column-start & grid-column-end

.box1{
    grid-row-start: 2;
    grid-row-end: 4;
    grid-row: 2 / 4;
}

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.

justify-self and align-self

justify-self is used to align the selected item in the horizontal direction in the grid.

.box1{
    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.

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

order

This property is used to give order to the items in the container default will be 0 .

.box1{
    order: 2;
}

Important Units and Functions

fr units

It is a fractional unit. its size depend on how much time its divided.

if there is only 1 fraction then it will take 100% of available space.

if there are 3 fraction then each fraction will take 33.3% of available space.

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

repeat()

It is used when we want to give same size to multiple rows & columns in a grid.

It takes 2 values 1st number or repetitions 2nd size we want which can be in fr , px or % as the units.

.container
{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(3,1fr);
}

Thanks for reading.