CSS Grid

CSS Grid Layout is a powerful two-dimensional layout system that allows us to create complex grid-based layouts with ease.

Creating a Grid Card

display: grid;

Defines a grid container.

Example:

.card {
  display: grid;
}

Grid Gap

grid-gap (or gap in shorthand):

Example:

.card {
  grid-gap: 20px; /* Gap of 20 pixels between rows and columns */
}

Specifies the gap between grid rows and columns. we can specify the gap using length units.

Placing Grid Items

Example:

.card-item {
  grid-row: 1 / 3; /* Grid item starts at row line 1 and ends at row line 3 */
  grid-column: 2; /* Grid item starts and ends at column line 2 */
}

grid-row and grid-column:

Specifies on which row and column a grid item should start and end. we can specify the grid line number, span, or auto.

Example:

.card {
  grid-template-rows: 100px 200px; /* Two rows, first 100 pixels, second 200 pixels */
  grid-template-columns: 1fr 2fr; /* Two columns, first column occupies 1 fraction of available space, second column occupies 2 fractions */
}

Defining Rows and Columns

grid-template-rows and grid-template-columns:

Example:

.card {
  justify-items: center; /* Align items along the row axis */
  align-items: center; /* Align items along the column axis */
}

Specifies the size of rows and columns in the grid. we can specify sizes using length units, percentages, or auto.

Aligning Items

justify-items and align-items:

Aligns grid items within the grid cells along the row and column axis. for ex:- "start", "end", "center", "stretch".

<-- Flex

Gradient -->