Grids

• Grids allow us to create layouts using rows and columns approach

• It is very similar to flexbox but flexbox is used for 1D and Grids for 2D

Container

• grid-template-columns used to define number of columns

• grid-template-rows used to defined rows

• fr unit is used in grids means one equal fraction which is usually used with repeat(2, 1fr)

• The gap property is used to give gaps between elements, we also have column-gap and row-gap

• GRIDS: gtc, gtr, repeat, 1fr, align/justify items/content.

Child

• align/justify self & grid-row-start/end, grid-column-start/end

• place-items property is used for align-items and justify-items shorthand

• Grid Lines

.features-inner {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}