CSS : Grid

Grid

Grid means the intersection of lines.

An intersection of vertical and horizontal lines is known as a grid.

Developers use grid layouts to separate major sections of a page.

A grid-based layout system with rows and columns is provided by the grid attribute.

It eliminates the need for positioning and floating, making web page creation simple.

The developers can align the pieces into rows and columns like a table.

There are some terminologies associated with the Grid

1. Element

2. Row

3. Column

4. Gap

5. Line

Grid Container:

Grid containers are made up of grid elements that are arranged in columns and rows.

This is a beautiful and organised arrangement for any webpage.

Grid items are the child elements within a container.

Property of Grid Container

1. Grid-template-rows: It is used to define the number of rows in a grid layout. It also defines the height of each row.

2. Grid-template-columns: it is used to define the number of columns in a grid layout. It also defines the width of each column.

3. Align-content: Vertically aligns the whole grid inside the space container.

1. Justify-content: Horizontally align the whole grid inside the space container.

Grid items

Grid items are child elements within a container.

Grid items appear in each column and each row of a container by default.

Property of Grid Items

1. Grid-row: Defines on which row to place an item. We can also state here where the item will start and where the item will end.

2. Grid-columns: Defines on which columns to place an item. We can also state here where the item will start and where the item will end.

3. Grid area: Grid area property can be used as a shorthand.

For the attributes grid-row(start and end) and grid columns (start and end).

One is the most important difference between flex and Grid.

Flex is used to create a one-dimensional layout.

Grid is used to create a two-dimensional layout.

Grid Layout

The Grid layout is a two-dimensional layout system which is used to create rows and columns.

It allows for the creation of flexible and responsive layouts that can adapt to different screen sizes and devices.

Columns Template of Grid

The grid template columns property is used to define the number of columns in a grid layout.

It can also define the width of each column.

If you want your grid layout to contain 5 columns, specify the width of the 5 columns, or auto if you want the same width of all columns.

Rows Template of Grid

The grid template rows property is used to define the number of rows in a grid

layout.

It can also define the height of each row.

If you want your grid layout to contain 4 rows. specify the height of the 4 rows, or auto property.

Special Units and Function for Rows and Columns Template

fr units: The “fr” unit in CSS is a way to divide up the available space in a grid or layout. It is used to specify how much of the space should be given to a certain element or group of elements.

It represents a fraction of the available space.

repeat(): The repeat function is used to reduce repetitive declarations.

Here is some code of the Grid layout.

.conatiner{
    /* border: 2px solid black; */
    display: grid;
    /* grid-template-columns: auto auto auto auto; */
    /* grid-template-columns: 500px 500px 500px; */
    grid-template-columns: 1fr 1fr 1fr;
    /* grid-template-columns: repeat(3,1fr);
    grid-template-columns: minmax(10px , 2fr); */
    grid-template-rows: 600px 100px 100px;
    /* grid-area: ; */

}

.box1{

    background-color: red;
/* align-self: center; y -axis */
/* justify-self: flex-start; */
/* grid-row-start: 1;
grid-row-end: 3; */
grid-column-start: 1;
grid-column-end: 3;
}