CSS Grid Container - W3Schools

Trang chủ » Html Grid Column Max Width » CSS Grid Container - W3Schools

Có thể bạn quan tâm

CSS Grid Container ❮ Previous Next ❯

CSS Grid Container

A grid container contains one or more grid items arranged in columns and rows.

All direct child elements of a grid container automatically become grid items.

An element becomes a grid container when its display property is set to grid or inline-grid.

1 2 3 4 5

Try it Yourself »

Display Grid Property

The <div> element becomes a grid container when its display property is set to grid or inline-grid.

Example

Use display: grid to make a block-level grid container:

.container { display: grid;}

Result:

1 2 3 4 5

Try it Yourself »

Example

Use display: inline-grid to make an inline grid container:

.container { display: inline-grid;}

Result:

1 2 3 4 5

Try it Yourself »

CSS Grid Container Properties

Property Description
align-content Vertically aligns the grid items inside the container
align-items Specifies the default alignment for items inside a flexbox or grid container
display Specifies the display behavior (the type of rendering box) of an element
column-gap Specifies the gap between the columns
gap A shorthand property for the row-gap and the column-gap properties
grid A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties
grid-auto-columns Specifies a default column size
grid-auto-flow Specifies how auto-placed items are inserted in the grid
grid-auto-rows Specifies a default row size
grid-template A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties
grid-template-areas Specifies how to display columns and rows, using named grid items
grid-template-columns Specifies the size of the columns, and how many columns in a grid layout
grid-template-rows Specifies the size of the rows in a grid layout
justify-content Horizontally aligns the grid items inside the container
place-content A shorthand property for the align-content and the justify-content properties
row-gap Specifies the gap between the grid rows
❮ Previous Next ❯ ★ +1 Sign in to track progress

Từ khóa » Html Grid Column Max Width