Skip to content
View in the app

A better way to browse. Learn more.
OKCCN - XenForo & IPS Plugin Marketplace

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

CSS Grid Container

Cavalry
in Tutorial

Featured Replies

  • Administrators

CSS Grid Container

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

  • Quote

    • Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.

    Guest
    Reply to this topic...
    Go to topic listing

    Account

    Navigation

    Search

    Search

    Configure browser push notifications
    Chrome (Android)
    1. Tap the lock icon next to the address bar.
    2. Tap Permissions → Notifications.
    3. Adjust your preference.
    Chrome (Desktop)
    1. Click the padlock icon in the address bar.
    2. Select Site settings.
    3. Find Notifications and adjust your preference.