Syntax
place-items: align justify;
place-content: align justify;Examples
Centering with place-items
The famous one-line perfect-centering trick using Grid.
.center {
display: grid;
place-items: center; /* centers child both vertically and horizontally */
height: 300px;
}Positioning the Grid Itself
When the grid is smaller than its container, place-content controls its position.
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
place-content: center; /* centers the whole grid within a larger container */
height: 400px;
}Parameters and values
- justify-items (start | center | end | stretch): Aligns items horizontally within their cells
- align-items (start | center | end | stretch): Aligns items vertically within their cells
- place-items (shorthand): Sets align-items and justify-items together
- place-content (shorthand): Positions the entire grid within its container
Best practices
- Use place-items: center as the simplest, most reliable way to perfectly center a single child element
- Remember justify-items/align-items affect items within their cells, while justify-content/align-content position the grid tracks as a whole within the container
- These same alignment properties work in Flexbox too, though the axis they refer to depends on flex-direction there
- Use align-self/justify-self on an individual grid item to override the container's place-items just for that one item
At a glance
- Purpose
- Presentation and layout
- File extension
- .css
- Runs in
- Web browsers
- Usually used with
- HTML and JavaScript
Specifications & further reading
Related CSS documentation
Flexbox
Flexbox (Flexible Box Layout) is a powerful one-dimensional layout system in CSS that makes it easy to design flexible and responsive layouts. It provides an efficient way to distribute space and align items in a container, even when their sizes are unknown or dynamic. Flexbox is particularly useful for creating navigation bars, card layouts, and centering content.CSS Grid
CSS Grid is a powerful two-dimensional layout system that provides precise control over both rows and columns simultaneously. Unlike Flexbox which is one-dimensional, Grid excels at creating complex layouts with explicit row and column structures. It's ideal for page layouts, image galleries, and any design requiring both horizontal and vertical alignment.Flex Item Properties
While display: flex controls the container, individual flex items have their own properties for fine-grained control. flex-grow, flex-shrink, and flex-basis (usually combined via the flex shorthand) control how an item grows or shrinks to fill space. order changes visual order without touching the HTML. align-self overrides the container's align-items for a single item.grid-template-areas
grid-template-areas lets you visually lay out a grid using named regions written directly in your CSS, making complex page layouts remarkably readable. Each string represents a row, each word represents a named area, and child elements are placed into an area using grid-area, matching the visual shape of your layout with the code itself.
Flexbox (Flexible Box Layout) is a powerful one-dimensional layout system in CSS that makes it easy to design flexible and responsive layouts. It provides an efficient way to distribute space and align items in a container, even when their sizes are unknown or dynamic. Flexbox is particularly useful for creating navigation bars, card layouts, and centering content.CSS Grid
CSS Grid is a powerful two-dimensional layout system that provides precise control over both rows and columns simultaneously. Unlike Flexbox which is one-dimensional, Grid excels at creating complex layouts with explicit row and column structures. It's ideal for page layouts, image galleries, and any design requiring both horizontal and vertical alignment.Flex Item Properties
While display: flex controls the container, individual flex items have their own properties for fine-grained control. flex-grow, flex-shrink, and flex-basis (usually combined via the flex shorthand) control how an item grows or shrinks to fill space. order changes visual order without touching the HTML. align-self overrides the container's align-items for a single item.grid-template-areas
grid-template-areas lets you visually lay out a grid using named regions written directly in your CSS, making complex page layouts remarkably readable. Each string represents a row, each word represents a named area, and child elements are placed into an area using grid-area, matching the visual shape of your layout with the code itself.