Afroj Mansoori's Blog

CSS Grid

Afroj Mansoori's photo
Afroj Mansoori
·

2 min read

What is CSS grid, difference between flex and grid

Grid: CSS grid define layout of a webpage. it is two dimension approach work with row and column. It is make easier to design a webpage.

Difference between flex and grid

Flexbox is made for one-dimensional layouts, and the Grid is made for two-dimensional layouts. It means Flexbox can work on either rows or columns at a time, but Grids can work on both.

CSS Grid is a two-dimensional layout system that allows users to design and build structures that are otherwise impossible with traditional HTML and CSS.

Grids provide more flexibility when it comes to aligning and creating complex layouts. For example, grids can use justify-self, justify-content, justify-items, align-items, and align-self. Flexboxes can optionally align elements along a baseline.

Ques. How can you din rows and columns or your grid

To get started you have to define a container element as a grid with display: grid , set the column and row sizes with grid-template-columns and grid-template-rows , and then place its child elements into the grid with grid-column and grid-row . Similarly to flexbox, the source order of the grid items doesn't matter.

Ques. List any to properties of the grid item and grid container.

Here are some properties of grid items and grid containers:

  • Implicit grid: Extends the defined explicit grid when content is placed outside of that grid.

  • Absolute positioning: Occurs after layout of the grid and its in-flow contents.

  • Aligning the grid: Aligns grid items along the inline (row) axis.

  • Grid-template-columns: Defines the explicit grid of a grid container.

  • Grid-row-end: Sets the element's end position within the grid row.

  • Grid-column: Sets the element's size and location within a column.

CSS