learn2kode.in

Menu

CSS Tutorial

Menu

CSS Grid

CSS Grid is a powerful 2-dimensional layout system that allows you to create responsive and complex layouts easily. Unlike Flexbox (which is 1-dimensional), Grid works in rows and columns simultaneously.

Common Grid Container Properties

CSS Grid Container Properties Table

Property Description
display: grid Enables CSS Grid on the container
grid-template-columns Defines number and width of columns
grid-template-rows Defines number and height of rows
gap Sets space between grid items
row-gap Controls gap between rows
column-gap Controls gap between columns
justify-items Aligns items horizontally inside their cells
align-items Aligns items vertically inside their cells
place-items Shorthand for justify-items + align-items
Copy Text 
.container {
  display: flex;
}

2. Flex Items

The child elements inside the flex container.

Common Flexbox Properties (Container)

Property Description
display: flex Enables Flexbox
flex-direction Sets direction of items (row/column)
flex-wrap Allows items to wrap to the next line
justify-content Aligns items horizontally
align-items Aligns items vertically
align-content Aligns multiple rows (when wrapped)
gap Adds space between items

Grid Item Properties

Property Description
grid-column Specifies starting/ending column
grid-row Specifies starting/ending row
grid-area Defines item position using grid template areas
justify-self Aligns an item horizontally inside its cell
align-self Aligns an item vertically inside its cell
place-self Shorthand for justify-self + align-self

Grid Template Values Explained

grid-template-columns / grid-template-rows values

Value Meaning
px, %, em, fr Fixed, percentage, relative, or flexible units
repeat(n, value) Creates repeating columns/rows
auto-fit Fits as many columns as possible
auto-fill Fills the row with empty tracks if needed

Basic Grid Layout Example

Copy Text 
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
CSS Units