A grid-based🧱 layout system with rows and columns is provided by CS's grid layout module and makes web page design simpler by removing the need for float and positioning. It uses a two-dimensional grid architecture and has quick and efficient coding🧑💻.
CSS Grid Properties
1. Grid-template-rows and Grid-template-columns
grid-template-rows: sets the dimensions of the rows in a grid layout.
Syntax:
grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;
grid-template-columns: sets the dimensions of the columns in a grid layout.
Syntax:
grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;
In this example,
We specified the columns as one fraction, two fractions, and 20% for container 1, and the rows as two 100px and 50px. The column is set to repeat(4, auto) for container 2, which implies that the column will be divided into 4 equal portions. Row and column widths may be customised using a combination of pixels, fractions, percentages, and auto.
2. grid-gap
Grid-gap related properties are:
i. grid-row-gap
Defines the width of the space between rows.
Syntax:
grid-row-gap: length;
ii. grid-column gap
Defines the width of the space between columns.
Syntax:
grid-column-gap: length;
iii. grid-gap
A property that serves as a shorthand for the grid-row-gap and grid-column-gap properties.
Syntax:
grid-gap: grid-row-gap grid-column-gap;
In this example,
We set the grid-row-gap and grid-column-gap properties for container1 to determine the space between rows and columns. While just using the grid-gap attribute in container 2, we supplied the column gap and row gap in this one line.
3. Grid items positioning and spanning
i. grid-row-start
where the grid item should begin in a row is specified.
Syntax:
grid-row-start: auto | row-line;
ii. grid-row-end
where the grid item should end in a row specified.
Syntax:
grid-row-end: auto | row-line | span n;
iii. grid-row
a shortcut for the grid-row-start and grid-row-end attributes.
Syntax:
grid-row: grid-row-start / grid-row-end;
iv. gird-column-start
where the grid item should begin in the column specified.
Syntax:
grid-column-start: auto | column-line | span n;
v. grid-column-end
where the grid item should end in the column specified.
Syntax:
grid-column-end: auto | column-line | span n;
vi. grid-column
a shortcut for the grid-column-start and grid-colum-end attributes.
Syntax:
grid-column: grid-column-start / grid-column-end;
vii. grid-area
Gives the grid item a name and acts as a shorthand for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end attributes.
Syntax:
grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;
In this example,
We placed the items 1, 6, and 3 in container 1 according to our needs, and we spanned items 1 and 4 in container 2.
4. Grid-template-area and Grid-area
grid-template-area: Named grid elements are used to specify how columns and rows should be displayed.
Syntax:
grid-template-areas: none|itemnames;
grid-area: This property either defines a name for the grid item or serves as a shortcut for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties.
Syntax:
grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;
In this example,
Each specific div has a grid-area allocated to it, and using grid-template-areas, we span the div areas to position them.
5. Implicit Grid
i. grid-auto-rows
a default row size is specified
Syntax:
grid-auto-rows: auto|max-content|min-content|length;
ii. grid-auto-columns
a default column size is specified
Syntax:
grid-auto-columns: auto|max-content|min-content|length;
iii. grid-auto-flows
describes the grid's insertion of objects that were put in automatically.
Syntax:
grid-auto-flow: row|column|dense|row dense|column dense;
In this example,
we set the size of the newly added rows to 80px and We shift the newly added items to the column after setting grid-auto-flow to the column, and we set the newly added size to be a 0.5 fraction.
We have now finished discussing all relevant topics related to the CSS grid.
Happy Learning😊