rick@tillitsdone.com

+66824564755

Scroll to discover

CSS place-items Simplify Item Alignment in Flexbox and Grid

Learn how to use the CSS place-items property to align items in both Flexbox and Grid layouts.

This shorthand property combines align-items and justify-items, offering various alignment options like start, center, end, and stretch.

Introduction

The CSS place-items property is a handy shorthand that lets you align items in both block and inline directions at once. It combines align-items and justify-items, making it super useful for web developers. By using place-items, you can streamline your CSS and make your layouts look great with less effort.

Specification

The place-items property is defined in the CSS Box Alignment Module Level 3 specification. This ensures that it works consistently across different browsers and platforms. Following this specification helps developers create reliable and predictable web designs.

Constituent Properties

The place-items property combines two individual CSS properties:

align-items: This property aligns items along the block axis (usually vertical).
justify-items: This property aligns items along the inline axis (usually horizontal).

Using place-items, you can set both align-items and justify-items with one declaration. If you provide one value, it applies to both. If you provide two values, the first applies to align-items and the second to justify-items.

Syntax

The place-items property has a straightforward syntax:

/* Positional alignment */
place-items: center;
place-items: normal start;
place-items: center normal;
place-items: start legacy;
place-items: end normal;
place-items: self-start legacy;
place-items: self-end normal;
place-items: flex-start legacy;
place-items: flex-end normal;
place-items: anchor-center;

/* Baseline alignment */
place-items: baseline normal;
place-items: first baseline legacy;
place-items: last baseline normal;
place-items: stretch legacy;

/* Global values */
place-items: inherit;
place-items: initial;
place-items: revert;
place-items: revert-layer;
place-items: unset;

Key Points:

Single Value Syntax: If you provide a single value, it applies to both align-items and justify-items.
```
place-items: center; /* Aligns items to the center in both directions */
```

Two-Value Syntax: If you provide two values, the first applies to align-items and the second to justify-items.

place-items: center normal; /* Aligns items to the center in the block direction and to the normal position in the inline direction */

Values

The place-items property can take one or two values to determine the alignment of items.

One-Value Syntax

If you provide a single value, it applies to both align-items and justify-items.

place-items: center; /* Aligns items to the center in both directions */

Two-Value Syntax

If you provide two values, the first applies to align-items and the second to justify-items.

place-items: center normal; /* Aligns items to the center in the block direction and to the normal position in the inline direction */

Possible Values

normal: Default alignment.
start: Aligns items to the start of the container.
end: Aligns items to the end of the container.
center: Aligns items to the center.
flex-start: Aligns items to the start of the flex container.
flex-end: Aligns items to the end of the flex container.
self-start: Aligns items to the start of their own alignment container.
self-end: Aligns items to the end of their own alignment container.
baseline: Aligns items based on their baseline.
first baseline: Aligns items based on the first baseline.
last baseline: Aligns items based on the last baseline.
stretch: Stretches items to fill the container.
auto: Default alignment based on the item’s properties.
inherit: Inherits the alignment from the parent.
initial: Sets the alignment to its initial value.
revert: Reverts the alignment to the user agent’s default.
revert-layer: Reverts the alignment to the user agent’s default for a specific layer.
unset: Resets the alignment to its inherited value if it inherits, or to its initial value if not.

Examples

place-items: start center; /* Aligns items to the start in the block direction and to the center in the inline direction */
place-items: end normal; /* Aligns items to the end in the block direction and to the normal position in the inline direction */
place-items: flex-start stretch; /* Aligns items to the start of the flex container and stretches them to fill the container */
place-items: baseline auto; /* Aligns items based on their baseline and uses the default alignment for the inline direction */

Formal Syntax

The place-items property in CSS follows this formal syntax:

place-items =
  [<'align-items'>]WebsiteUrl [<'justify-items'>]WebsiteUrl[?]

<align-items> =
  normal
  stretch
  <baseline-position>
  [<overflow-position>? <self-position>]
  anchor-center

<justify-items> =
  normal
  stretch
  <baseline-position>
  <overflow-position>? [<self-position> | left | right]
  legacy
  legacy && [left | right | center]
  anchor-center

<baseline-position> =
  [first | last]?
  baseline

<overflow-position> =
  unsafe
  safe

<self-position> =
  center
  start
  end
  self-start
  self-end
  flex-start
  flex-end

Key Points:

align-items and justify-items: These properties define how place-items works.
normal, stretch, baseline, anchor-center: Specific alignment values.
overflow-position: Handles overflow with unsafe or safe.
self-position: Defines item position within their alignment container.

Examples

Here are some examples showing how to use place-items in both Flexbox and Grid containers.

Placing Items in a Flex Container

In Flexbox, place-items can align items within a flex container. Note that justify-self and justify-items do not apply in Flexbox because items are treated as a group on the main axis. Therefore, the second value will be ignored.

Placing Items in a Grid Container

In a Grid container, place-items can align items within the grid cells. This is particularly useful when items are smaller than their grid areas.

HTML

<div class="grid-container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  place-items: center; /* Centers items both vertically and horizontally */
}

This setup centers all items within the grid cells, making the layout clean and balanced. Using place-items simplifies your CSS and helps you create visually appealing designs with ease.

Using `place-items` to Align Items in Grid and Flex Containers

The place-items property in CSS allows you to control the alignment of items within Grid and Flex containers. This makes your layouts more dynamic and visually appealing. Here’s how you can use it:

HTML

<div id="gridcontainer">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4</div>
  <div id="item5">5</div>
</div>

<div class="row">
  <label for="gridvalues">Place Items: </label>
  <select id="gridvalues">
    <option value="stretch">stretch</option>
    <option value="start">start</option>
    <option value="center">center</option>
    <option value="end">end</option>
    <option value="left">left</option>
    <option value="right">right</option>
    <option value="auto center">auto center</option>
    <option value="normal start">normal start</option>
    <option value="center normal">center normal</option>
    <option value="start auto">start auto</option>
    <option value="end normal">end normal</option>
    <option value="self-start auto">self-start auto</option>
    <option value="self-end normal">self-end normal</option>
    <option value="flex-start auto">flex-start auto</option>
    <option value="flex-end normal">flex-end normal</option>
    <option value="left auto">left auto</option>
    <option value="right normal">right normal</option>
    <option value="baseline normal">baseline normal</option>
    <option value="first baseline auto">first baseline auto</option>
    <option value="last baseline normal">last baseline normal</option>
    <option value="stretch auto">stretch auto</option>
  </select>
</div>

CSS

#gridcontainer {
  height: 200px;
  width: 240px;
  place-items: stretch; /* Change this value by selecting an option from the list */
  background-color: #8c8c8c;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

#gridcontainer > div {
  box-sizing: border-box;
  border: 2px solid #8c8c8c;
  width: 50px;
}

#item1 {
  background-color: #8cffa0;
  min-height: 30px;
  font-size: 2em;
}

#item2 {
  background-color: #a0c8ff;
  min-height: 50px;
}

#item3 {
  background-color: #ffa08c;
  min-height: 40px;
}

#item4 {
  background-color: #ffff8c;
  min-height: 60px;
}

#item5 {
  background-color: #ff8cff;
  min-height: 70px;
}

select {
  font-size: 16px;
}

.row {
  margin-top: 10px;
}

JavaScript

const values = document.getElementById("gridvalues");
const container = document.getElementById("gridcontainer");

values.addEventListener("change", (evt) => {
  container.style.placeItems = evt.target.value;
});

Using `place-items` in a Flex Container

In a Flexbox container, place-items aligns items along both the block and inline directions. Note that justify-self and justify-items do not apply in Flexbox, so the second value in place-items will be ignored.

HTML

<div id="container">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
</div>

<div class="row">
  <label for="values">Place Items: </label>
  <select id="values">
    <option value="stretch">stretch</option>
    <option value="start">start</option>
    <option value="center">center</option>
    <option value="end">end</option>
    <option value="left">left</option>
    <option value="right">right</option>
    <option value="auto center">auto center</option>
    <option value="normal start">normal start</option>
    <option value="center normal">center normal</option>
    <option value="start auto">start auto</option>
    <option value="end normal">end normal</option>
    <option value="self-start auto">self-start auto</option>
    <option value="self-end normal">self-end normal</option>
    <option value="flex-start auto">flex-start auto</option>
    <option value="flex-end normal">flex-end normal</option>
    <option value="left auto">left auto</option>
    <option value="right normal">right normal</option>
    <option value="baseline normal">baseline normal</option>
    <option value="first baseline auto">first baseline auto</option>
    <option value="last baseline normal">last baseline normal</option>
    <option value="stretch auto">stretch auto</option>
  </select>
</div>

CSS

#container {
  height: 200px;
  width: 240px;
  place-items: stretch; /* Change this value by selecting an option from the list */
  background-color: #8c8c8c;
  display: flex;
}

#container > div {
  box-sizing: border-box;
  border: 2px solid #8c8c8c;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#item1 {
  background-color: #8cffa0;
  min-height: 30px;
  font-size: 2em;
}

#item2 {
  background-color: #a0c8ff;
  min-height: 50px;
}

#item3 {
  background-color: #ffa08c;
  min-height: 40px;
}

select {
  font-size: 16px;
}

.row {
  margin-top: 10px;
}

JavaScript

const values = document.getElementById("values");
const container = document.getElementById("container");

values.addEventListener("change", (evt) => {
  container.style.placeItems = evt.target.value;
});

Using `place-items` in a Grid Container

In a Grid container, place-items aligns items within their grid cells. This is particularly useful when items are smaller than their grid areas.

HTML

<div id="gridcontainer">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4</div>
  <div id="item5">5</div>
</div>

<div class="row">
  <label for="gridvalues">Place Items: </label>
  <select id="gridvalues">
    <option value="stretch">stretch</option>
    <option value="start">start</option>
    <option value="center">center</option>
    <option value="end">end</option>
    <option value="left">left</option>
    <option value="right">right</option>
    <option value="auto center">auto center</option>
    <option value="normal start">normal start</option>
    <option value="center normal">center normal</option>
    <option value="start auto">start auto</option>
    <option value="end normal">end normal</option>
    <option value="self-start auto">self-start auto</option>
    <option value="self-end normal">self-end normal</option>
    <option value="flex-start auto">flex-start auto</option>
    <option value="flex-end normal">flex-end normal</option>
    <option value="left auto">left auto</option>
    <option value="right normal">right normal</option>
    <option value="baseline normal">baseline normal</option>
    <option value="first baseline auto">first baseline auto</option>
    <option value="last baseline normal">last baseline normal</option>
    <option value="stretch auto">stretch auto</option>
  </select>
</div>

CSS

#gridcontainer {
  height: 200px;
  width: 240px;
  place-items: stretch; /* Change this value by selecting an option from the list */
  background-color: #8c8c8c;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

#gridcontainer > div {
  box-sizing: border-box;
  border: 2px solid #8c8c8c;
  width: 50px;
}

#item1 {
  background-color: #8cffa0;
  min-height: 30px;
  font-size: 2em;
}

#item2 {
  background-color: #a0c8ff;
  min-height: 50px;
}

#item3 {
  background-color: #ffa08c;
  min-height: 40px;
}

#item4 {
  background-color: #ffff8c;
  min-height: 60px;
}

#item5 {
  background-color: #ff8cff;
  min-height: 70px;
}

select {
  font-size: 16px;
}

.row {
  margin-top: 10px;
}

JavaScript

const values = document.getElementById("gridvalues");
const container = document.getElementById("gridcontainer");

values.addEventListener("change", (evt) => {
  container.style.placeItems = evt.target.value;
});

Result

This example shows how to use the place-items property to align items within Grid and Flex containers. By changing the place-items value, you can control the alignment of items in both block and inline directions, making your layouts more flexible and visually appealing.

Understanding the `place-items` Property

The place-items property is part of the CSS Box Alignment Module Level 3, which helps align items within a container. This module ensures that alignment works consistently across different web browsers and platforms.

Key Specifications

CSS Box Alignment Module Level 3: Defines place-items and related properties like align-items and justify-items.
CSS Grid Layout Module Level 1: Specifies the CSS Grid layout system and how it uses place-items.
CSS Flexible Box Layout Module Level 1: Specifies the CSS Flexbox layout system and how it uses place-items.

These specifications help web developers create reliable and predictable web designs that work seamlessly across different devices and environments.

References

Browser Compatibility

The place-items property is widely supported across modern web browsers, ensuring consistent display across different platforms and devices.

Desktop Browsers

Google Chrome: Supported since version 59.
Mozilla Firefox: Supported since version 45.
Microsoft Edge: Supported since version 79.
Safari: Supported since version 11.
Opera: Supported since version 46.

Mobile Browsers

Chrome for Android: Supported since version 59.
Firefox for Android: Supported since version 45.
Safari on iOS: Supported since version 11.
Opera Mobile: Supported since version 46.
Samsung Internet: Supported since version 7.2.

Notes on Compatibility

Internet Explorer: Not supported in any version.
Older Versions: Some older browsers may not fully support place-items.

Checking Browser Compatibility

Use tools like Can I use or refer to resources like MDN Web Docs to check browser compatibility.

Best Practices

Progressive Enhancement: Ensure your designs degrade gracefully in older browsers.
Feature Detection: Use libraries like Modernizr to check for support.
Testing: Regularly test your designs across different browsers and devices.

Resources

Talk with CEO

Ready to bring your web/app to life or boost your team with expert Thai developers?

Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!

🖐️ Contact us

Explore our best articles, cover a wide variety of technologies

Our knowledge base

UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.

150 Articles

Explore

Nodejs

JavaScript runtime for building scalable, high-performance server-side applications.

60 Articles

Explore

Nextjs

React framework enabling server-side rendering and static site generation for optimized performance.

40 Articles

Explore

Typescript

Superset of JavaScript adding static types for improved code quality and maintainability.

39 Articles

Explore

TailwindCSS

Utility-first CSS framework for rapid UI development.

130 Articles

Explore

Golang

Programming language known for its simplicity, concurrency model, and performance.

70 Articles

Explore

AstroJs

Astro is an all-in-one web framework. It includes everything you need to create a website, built-in.

40 Articles

Explore

Jest

Versatile testing framework for JavaScript applications supporting various test types.

337 Articles

Explore

CSS

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

Let's keep in Touch

Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.

Contact Information

rick@tillitsdone.com+66824564755

Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.

Address

9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand

Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.

Social media

Facebook Instagram LinkedIn

Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.

We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.

DesignRush
web design companies

Goodfirms

CSS place-items Simplify Item Alignment in Flexbox and Grid

Introduction

Specification

Constituent Properties

Syntax

Key Points:

Values

One-Value Syntax

Two-Value Syntax

Possible Values

Examples

Formal Syntax

Key Points:

Examples

Placing Items in a Flex Container

Placing Items in a Grid Container

HTML

CSS

Using place-items to Align Items in Grid and Flex Containers

HTML

CSS

JavaScript

Using place-items in a Flex Container

HTML

CSS

JavaScript

Using place-items in a Grid Container

HTML

CSS

JavaScript

Result

Understanding the place-items Property

Key Specifications

References

Browser Compatibility

Desktop Browsers

Mobile Browsers

Notes on Compatibility

Checking Browser Compatibility

Best Practices

Resources

See Also

Talk with CEO

Using `place-items` to Align Items in Grid and Flex Containers

Using `place-items` in a Flex Container

Using `place-items` in a Grid Container

Understanding the `place-items` Property