CSS Grid Layout

Hey Guyss, in my last blog we have discussed about flex-box properties which is a one dimensional property, in this blog we will see one more interesting topic, i.e ‘Grid’ which is a two-dimensional property

CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flex-box which is largely a 1-dimensional system.CSS Grid was built with responsiveness in mind, it’ll take less code than writing media queries all over the place.

Following are the properties of the grid which provide various different responsiveness and positioning to our web-page :

display:

Defines the element as a grid container and establishes a new grid formatting context for its contents.

Values:

→grid : generates a block-level grid

→inline-grid : generates an inline-level grid

grid-template-columns || grid-template-rows :

Defines the columns and rows of the grid with a space-separated list of values. The values represent the track size, and the space between them represents the grid line.

Values:

→ <track-size>: can be a length, a percentage, or a fraction of the free space in the grid (using the fr unit)

→<line-name>: an arbitrary name of your choosing

grid-template-areas :

Defines a grid template by referencing the names of the grid areas which are specified with the grid area property. Repeating the name of a grid area causes the content to span those cells. A period signifies an empty cell. The syntax itself provides a visualisation of the structure of the grid.

Values:

→<grid-area-name> : the name of a grid area specified with grid-area

→ a period signifies an empty grid cell

→none: no grid areas are defined

grid-template

A shorthand property for setting grid-template row, grid-template-column, and grid-template-area in a single declaration.

Values:

→none: sets all three properties to their initial values

→<grid-template-rows> / <grid-template-columns> : sets and grid-template-row to the specified values, respectively, and sets grid-template-area none.

column-gape || row-gap || grid-column-gap || grid-row-gap.

Specifies the size of the grid lines. You can think of it like setting the width of the gutters between the columns/rows.

Values:

→ <line-size>:a length value

gap || grid-gap

A shorthand for row-gap and column-gap

Values:

→ <grid-row-gap> <grid-column-gap>: length values

justify-items

It aligns grid items along the inline (row) axis or horizontally (as opposed to align-item which aligns along the block (column) axis). This value applies to all grid items inside the container.

Values:

→start: aligns items to be flush with the start edge of their cell

→end: aligns items to be flush with the end edge of their cell

→center : aligns items in the centre of their cell

→stretch: fills the whole width of the cell (this is the default)

align-items :

It aligns grid items along the block (column) axis or vertically(as opposed to justify-item which aligns along the inline (row) axis). This value applies to all grid items inside the container.

Values:

→start :aligns items to be flush with the start edge of their cell

→end : aligns items to be flush with the end edge of their cell

→center :aligns items in the centre of their cell

→stretch : fills the whole height of the cell (this is the default)

place-items

“place-items” sets both the align-items and justify-items properties in a single declaration.

Values:

→<align-items> / <justify-items> — The first value sets align-items, the second value justify-items . If the second value is omitted, the first value is assigned to both properties.

justify-content

Sometimes the total size of your grid might be less than the size of its grid container. This could happen if all of your grid items are sized with non-flexible units like px. In this case you can set the alignment of the grid within the grid container. This property aligns the grid along the inline (row) axis (as opposed to align-content which aligns the grid along the block (column) axis).

Values:

→start:aligns the grid to be flush with the start edge of the grid container

→end :aligns the grid to be flush with the end edge of the grid container

→center: aligns the grid in the center of the grid container

→stretch : resizes the grid items to allow the grid to fill the full width of the grid container

→space-around: places an even amount of space between each grid item, with half-sized spaces on the far ends

→space-between : places an even amount of space between each grid item, with no space at the far ends

→space-evenly: places an even amount of space between each grid item, including the far ends

align-content

Sometimes the total size of your grid might be less than the size of its grid container. This could happen if all of your grid items are sized with non-flexible units like px. In this case you can set the alignment of the grid within the grid container. This property aligns the grid along the block (column) axis (as opposed to justify-content which aligns the grid along the inline (row) axis).

Values:

• start : aligns the grid to be flush with the start edge of the grid container
• end: aligns the grid to be flush with the end edge of the grid container
• center : aligns the grid in the center of the grid container
• stretch : resizes the grid items to allow the grid to fill the full height of the grid container
• space-around: places an even amount of space between each grid item, with half-sized spaces on the far ends
• space-between : places an even amount of space between each grid item, with no space at the far ends
• space-evenly: places an even amount of space between each grid item, including the far ends

place-content

place-content sets both the align-content and justify-content properties in a single declaration.

Values:

• <align-content> / <justify-content> : The first value sets align-content , the second value justify-content . If the second value is omitted, the first value is assigned to both properties.

All major browsers except Edge support the place-content shorthand property.

→ grid-auto-columns || grid-auto-rows

Specifies the size of any auto-generated grid tracks (aka implicit grid tracks). Implicit tracks get created when there are more grid items than cells in the grid or when a grid item is placed outside of the explicit grid.

Values:

• <track-size> : can be a length, a percentage, or a fraction of the free space in the grid (using the fr unit)

grid-auto-flow

If you have grid items that you don’t explicitly place on the grid, the auto-placement algorithm kicks in to automatically place the items. This property controls how the auto-placement algorithm works.

Values:

→row : tells the auto-placement algorithm to fill in each row in turn, adding new rows as necessary (default)

→column : tells the auto-placement algorithm to fill in each column in turn, adding new columns as necessary

→ dense: tells the auto-placement algorithm to attempt to fill in holes earlier in the grid if smaller items come up later

So, this was all about the CSS Grid and all its properties and their respective values. So in this manner, CSS Grid is a powerful mechanism which allows a rather more “dynamicity” to our webpage and support in developing a rich UI.

Thank You, for taking out the time for reading this blog, see you guys in the next one !!