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 Items

Cavalry
in Tutorial

Featured Replies

  • Administrators

CSS Grid Items

CSS Grid Items

A grid container contains one or more grid items.

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

Below is a grid container with five grid items:

1
2
3
4
5

Try it Yourself »

CSS Sizing/Spanning Grid Items

A grid item can span over mulitiple columns or rows.

We can specify where to start and end a grid item by using the following properties:

  • grid-column-start - Specifies on which column-line the grid item will start
  • grid-column-end - Specifies on which column-line the grid item will end
  • grid-column - Shorthand property for grid-column-start and grid-column-end
  • grid-row-start - Specifies on which row-line the grid item will start
  • grid-row-end - Specifies on which row-line the grid item will end
  • grid-row - Shorthand property for grid-row-start and grid-row-end

The lines between the columns in a grid are called column-lines, and the lines between the rows in a grid are called row-lines.

We can refer to line numbers when placing a grid item in a grid container.

CSS grid-column-start and grid-column-end

The grid-column-start property specifies on which column-line the grid item will start.

The grid-column-end property specifies on which column-line the grid item will end.

Example

Let the first grid item start at column-line 1, and end on column-line 3:

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

Result:

1
2
3
4
5

Try it Yourself »

The CSS grid-column Property

The grid-column property is a shorthand property for the grid-column-start and the grid-column-end properties.

Example

Let the first grid item start at column-line 1, and let it span 2 columns:

.item1 {
  grid-column: 1 / span 2;
}

Result:

1
2
3
4
5

Try it Yourself »

CSS grid-row-start and grid-row-end

The grid-row-start property specifies on which row-line the grid item will start.

The grid-row-end property specifies on which row-line the grid item will end.

Example

Let the first grid item start at row-line 1, and end on row-line 3:

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

Result:

1
2
3
4
5

Try it Yourself »

The CSS grid-row Property

The grid-row property is a shorthand property for the grid-row-start and the grid-row-end properties.

Example

Let the first grid item start at row-line 1, and let it span 2 rows:

.item1 {
  grid-row: 1 / span 2;
}

Result:

1
2
3
4
5

Try it Yourself »

Combine grid-column and grid-row

Here we use both the grid-column and grid-row properties to let a grid item span both columns and rows.

Example

Let the first grid item start at column-line 1, and let it span 2 columns, also let the first grid item start at row-line 1, and let it span 2 rows:

.item1 {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

Result:

1
2
3
4
5
6

Try it Yourself »

All CSS Grid Item Properties

Property Description
align-self Aligns the content for a specific grid item along the column axis
grid-area A shorthand property for the grid-row-start, grid-column-start, grid-row-end and the grid-column-end properties
grid-column A shorthand property for the grid-column-start and the grid-column-end properties
grid-column-end Specifies where to end the grid item
grid-column-start Specifies where to start the grid item
grid-row A shorthand property for the grid-row-start and the grid-row-end properties
grid-row-end Specifies where to end the grid item
grid-row-start Specifies where to start the grid item
justify-self Aligns the content for a specific grid item along the row axis
place-self A shorthand property for the align-self and the justify-self properties

  • 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.