---
title: "Grid container properties"
date: "2026-03-04T06:53:53+00:00"
summary:
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/grid-container-properties"
id: "3c73b88d-79e3-494f-b487-cd6b26b55436"
---

To transform an element into a grid container, set the display property to `grid` or `inline-grid` in Style Builder. All direct children of the element become grid items.

Template columns
----------------

The `grid-template-columns` property defines the column structure of the grid.

Option

Behavior

`1fr 2fr 1fr`

Three columns with a 1:2:1 ratio

`repeat(3, 1fr)`

Three equal columns

`repeat(auto-fit, minmax(250px, 1fr))`

Responsive columns

Template rows
-------------

The `grid-template-rows` property defines the row structure of the grid.

Option

Behavior

`100px auto 50px`

A fixed header and footer with flexible content

`repeat(3, 200px)`

Three rows of 200px each

Template areas
--------------

The `grid-template-areas` property defines named grid areas to position items. 

Option

`"header header header"`

`"sidebar main main"`

`"footer footer footer"`

Items must reference these areas by using `grid-area: header` in the grid item properties.

Template shorthand
------------------

The `grid-template` property is a shorthand for setting both `grid-template-rows` and `grid-template-columns`.

Option

Behavior

`auto 1fr auto / 200px 1fr`

Defines rows and columns

`100px 1fr / repeat(3, 1fr)`

Defines two rows and three columns

Gap
---

The `gap` property sets the spacing between rows and columns.

Option

Behavior

`20px`

A 20px gap between all rows and columns

`20px 40px`

A 20px gap between rows and a 40px gap between columns

Row and column gap
------------------

Option

Behavior

`row-gap`

Sets the spacing between rows only

`column-gap`

sets the spacing between columns only

Grid display
------------

The `display` property sets the display mode for the grid container.

Option

Behavior

`grid`

Block-level grid container

`inline-grid`

Inline-level grid container

`subgrid`

Inherits the grid from the parent

`flex`

Flexbox container

`inline-flex`

Inline flexbox container

Justify and align Items
-----------------------

*   Justify items: The `justify-items` property aligns grid items along the row axis.
    
*   Align items: The `align-items` property aligns grid items along the column axis.
    

Both the justify and the align properties include the following options:

Option

Behavior

`start`

Aligns to the start of cell

`end`

Aligns to the end of cell

`center`

Aligns in the center of cell

`stretch`

*   To justify items, this fills the cell width.
*   To align items, this fills the cell height.

`stretch` is the default selection.

Justify and align content
-------------------------

*   Justify content: The `justify-content` property aligns the entire grid within the container along the row axis.
    
*   Align content: The `align-content` property aligns the entire grid within the container along the column axis.
    

Both the justify and the align properties include the following options:

Option

Behavior

`start`

Aligns grid to the start

`end`

Aligns grid to the end

`center`

Aligns grid to the center

`stretch`

Fills the container

`space-around`

Provides equal space around columns

`space-between`

Provides equal space between columns

`space-evenly`

Provides equal space everywhere

Grid auto
---------

*   Grid auto columns: The `grid-auto-columns` property specifies the size of implicitly created columns.
    
*   Grid auto rows: The `grid-auto-rows` property specifies the size of implicitly created rows.
    
*   Grid auto flow: The `grid-auto-flow` property controls how auto-placed items are inserted.
    

Option

Behavior

`row`

Fills rows and adds new rows as necessary

`column`

Fills columns and adds new columns as necessary

`dense`

Fills holes in the grid

Grid shorthand
--------------

This `grid` property is a shorthand for setting multiple grid properties simultaneously.

Option

Behavior

`auto-flow / 1fr 1fr 1fr`

Auto-flow rows with three columns

`100px 1fr / 200px 1fr`

Defines explicit rows and columns

Related properties
------------------

*   [Grid item properties](https://markdownlivepreview.com/#): Control individual item placement.
    
*   [Flex container properties](/drupal-starter-kits/add-ons/site-studio/flex-container-properties "Flex container properties"): Alternative layout system.
    
*   [Display properties](/drupal-starter-kits/add-ons/site-studio/display-properties "Display properties"): Set the display mode.
    

For more information about CSS grid layout, visit [MDN: CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) and [CSS-Tricks: Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/).