{"id":262713,"date":"2017-11-29T12:52:39","date_gmt":"2017-11-29T19:52:39","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=262713"},"modified":"2021-05-13T09:27:12","modified_gmt":"2021-05-13T16:27:12","slug":"place-items","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/p\/place-items\/","title":{"rendered":"place-items"},"content":{"rendered":"\n<p>The <code>place-items<\/code> property in CSS is shorthand for the <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/a\/align-items\/https:\/\/css-tricks.com\/almanac\/properties\/a\/align-items\/\">align-items<\/a><\/code> and <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/j\/justify-items\/\">justify-items<\/a><\/code> properties, combining them into a single declaration.<\/p>\n\n\n\n<p>A common usage is doing <em>horizontal and vertical<\/em> centering with <a href=\"https:\/\/css-tricks.com\/snippets\/css\/complete-guide-grid\/\">Grid<\/a>:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.center-inside-of-me {\n  display: grid;\n  place-items: center;\n}<\/code><\/pre>\n\n\n\n<!--more-->\n\n\n\n<p>These properties have gained use with the introduction of Flexbox and Grid layouts, but are also applied to:<\/p>\n\n\n\n<ul><li>Block-level boxes<\/li><li>Absolutely-positioned boxes<\/li><li>Static-position of absolutely positioned boxes<\/li><li>Table cells<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-syntax\">Syntax<\/h3>\n\n\n<p>The property accepts dual values, the first for <code>align-items<\/code> and the second for <code>justify-items<\/code>. As a refresher, <code>align-items<\/code> aligns content along the vertical (column) axis whereas <code>justify-items<\/code> aligns along the horizontal (row) axis.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.item {\n  display: grid;\n  place-items: start center;\n}<\/code><\/pre>\n\n\n\n<p>This is the same as writing:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.item {\n  display: grid;\n  align-items: start;\n  justify-items: center;\n}<\/code><\/pre>\n\n\n\n<p>If only one value is provided, then it sets both properties. For example, this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.item {\n  display: grid;\n  place-items: start;\n}<\/code><\/pre>\n\n\n\n<p>&#8230;is the same as writing this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.item {\n  display: grid;\n  align-items: start;\n  justify-items: start;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-accepted-values\">Accepted Values<\/h3>\n\n\n<p>What makes this property interesting is that it behaves differently based on the context it is used. For example, some values only apply to Flexbox and will not work in a Grid setting. Additionally, some values apply to the <code>align-items<\/code> property where others apply to the <code>justify-items<\/code> side.<\/p>\n\n\n\n<p>Further, the values themselves can be thought of as falling into a number of types of alignment: contextual, <a href=\"https:\/\/drafts.csswg.org\/css-align\/#distribution-values\" rel=\"noopener\">distribution<\/a>, <a href=\"https:\/\/drafts.csswg.org\/css-align\/#positional-values\" rel=\"noopener\">positional<\/a> (which becomes <a href=\"https:\/\/drafts.csswg.org\/css-align\/#typedef-self-position\" rel=\"noopener\">self-positional<\/a> if directly applied to a child-element in the layout), and <a href=\"https:\/\/drafts.csswg.org\/css-align\/#baseline-values\" rel=\"noopener\">baseline<\/a>.<\/p>\n\n\n\n<p>Rachel Andrew has an excellent <a href=\"https:\/\/rachelandrew.co.uk\/css\/cheatsheets\/box-alignment\" rel=\"noopener\">Box Alignment cheat sheet<\/a> that helps illustrate the effect of the values.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Value<\/th><th>Type<\/th><th>Description<\/th><\/tr><\/thead><tbody><tr><td><code>auto<\/code><\/td><td>Contextual<\/td><td>The value adjusts accordingly based on the context of the element. It uses the <code>justify-items<\/code> value of the element&#8217;s parent element. If not parent exists or it is applied to an element that is positioned with <code>absolute<\/code>, then the value becomes <code>normal<\/code>.<\/td><\/tr><tr><td><code>normal<\/code><\/td><td>Contextual<\/td><td>Takes the default behavior of the layout context where it is applied.<br><br>\u2022 Block-level layouts: <code>start<\/code><br>\u2022 Absolute-positioning: <code>start<\/code> for replaced absolute elements and <code>stretch<\/code> for all others<br>\u2022 Table layouts: Value is ignored<br>\u2022&nbsp;Flexbox layouts: Value is ignored<br>\u2022 Grid layouts: <code>stretch<\/code>, unless an aspect ratio or <a href=\"https:\/\/www.w3.org\/TR\/css-sizing-3\/#intrinsic-sizes\" rel=\"noopener\">intrinsic sizing<\/a> is used where it behaves like <code>start<\/code> <\/td><\/tr><tr><td><code>stretch<\/code><\/td><td>Distribution<\/td><td>Expands the element to both edges of the container vertically for <code>align-items<\/code> and horizontally for <code>justify-items<\/code>.<\/td><\/tr><tr><td><code>start<\/code><\/td><td>Positional<\/td><td>All elements are aligned against each other on the starting (left) edge of the container<\/td><\/tr><tr><td><code>end<\/code><\/td><td>Positional<\/td><td>All elements are aligned against each other on the ending (right) edge of the container<\/td><\/tr><tr><td><code>center<\/code><\/td><td>Positional<\/td><td>Items are aligned next to each other toward the center of the container<\/td><\/tr><tr><td><code>left<\/code><\/td><td>Positional<\/td><td>Items are aligned next to each other toward the left side of the container. If the property is not parallel to a standard top, right, bottom, left axis, then it behaves like <code>end<\/code>.<\/td><\/tr><tr><td><code>right<\/code><\/td><td>Positional<\/td><td>Items are aligned next to each other toward the right side of the container. If the property is not parallel to a standard top, right, bottom, left axis, then it behaves like <code>start<\/code>.<\/td><\/tr><tr><td><code>flex-start<\/code><\/td><td>Positional<\/td><td>A flexbox-only value (that falls back to <code>start<\/code>) where items are packed toward the starting edge of the container.<\/td><\/tr><tr><td><code>flex-end<\/code><\/td><td>Positional<\/td><td>A flexbox-only value (that falls back to <code>end<\/code>) where items are packed toward the ending edge of the container.<\/td><\/tr><tr><td><code>self-start<\/code><\/td><td>Self-Positional<\/td><td>Allows an item in a layout to align itself on the container edge based on its own starting side. Basically overrides what the set value is on the parent.<\/td><\/tr><tr><td><code>self-end<\/code><\/td><td>Self-Positional<\/td><td>Allows an item in a layout to align itself on the container edge based on its own ending side instead of inheriting the the container&#8217;s positional value. Basically overrides what the set value is on the parent.<\/td><\/tr><tr><td><code>first baseline<\/code><br><code>last baseline<\/code><\/td><td>Baseline<\/td><td>Aligns all elements within a group (i.e. cells within a row) by matching up their alignment baselines. Defaults to <code>first<\/code> if <code>baseline<\/code> is used on its own.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-browser-support\">Browser Support<\/h3>\n\n\n<p>This property is included in the <a href=\"https:\/\/drafts.csswg.org\/css-align-3\/#place-items-property\" rel=\"noopener\">CSS Box Alignment Model Level 3 specification<\/a>.<\/p>\n\n\n\n<p><a href=\"https:\/\/caniuse.com\/mdn-css_properties_place-items_flex_context\" rel=\"noopener\">Browser support<\/a> is pretty wide and stable:<\/p>\n\n\n\n<ul><li>Edge 79+ (post-Chromium)<\/li><li>Firefox 45+<\/li><li>Chrome 59+<\/li><li>Safari 11+<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-references\">References<\/h3>\n\n\n<ul><li><a href=\"https:\/\/drafts.csswg.org\/css-align-3\/#place-items-property\" rel=\"noopener\"><strong>CSS Box Alignment Model Level 3<\/strong><\/a> &#8211; The official specification where the <code>place-items<\/code> property is initially defined.<\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/place-items\" rel=\"noopener\"><strong>Mozilla Developer Network<\/strong><\/a> &#8211; The Mozilla team&#8217;s documentation.<\/li><li><a href=\"https:\/\/rachelandrew.co.uk\/css\/cheatsheets\/box-alignment\" rel=\"noopener\"><strong>Box Alignment Cheat Sheet<\/strong><\/a> &#8211; Rachel Andrew&#8217;s outline is a super helpful resource for grasping alignment terms and their definitions.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-related-properties\">Related properties<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card \" id=\"mini-post-262713\">\n\n  <time datetime=\"2013-04-11\" title=\"Originally published Nov 29, 2017\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Sep 28, 2022  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/a\/align-items\/\">\n      align-items    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/a\/align-items\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { align-items: flex-start; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/34cross\/\" aria-label=\"Author page of 34 Cross\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/f60063006a3ad2e8a11b5b52d95eef17?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/f60063006a3ad2e8a11b5b52d95eef17?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/34cross\/\">\n      34 Cross    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-262713\">\n\n  <time datetime=\"2020-12-02\" title=\"Originally published Nov 29, 2017\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Mar 2, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/j\/justify-items\/\">\n      justify-items    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/j\/justify-items\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { justify-items: center; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/mohitkhare\/\" aria-label=\"Author page of Mohit Khare\">\n      <img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/lJ1-nP6Q_400x400.jpg?resize=80%2C80&#038;ssl=1\" width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/mohitkhare\/\">\n      Mohit Khare    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-262713\">\n\n  <time datetime=\"2021-03-18\" title=\"Originally published Nov 29, 2017\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Apr 28, 2022  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/j\/justify-self\/\">\n      justify-self    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/j\/justify-self\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { justify-self: stretch; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/geoffgraham\/\" aria-label=\"Author page of Geoff Graham\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/geoffgraham\/\">\n      Geoff Graham    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n","protected":false},"excerpt":{"rendered":"<p>The place-items property in CSS is shorthand for the align-items and justify-items properties, combining them into a single declaration. A common usage is doing horizontal and vertical centering with Grid:<\/p>\n","protected":false},"author":2508,"featured_media":0,"parent":13941,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":21073,"url":"https:\/\/css-tricks.com\/almanac\/properties\/a\/align-items\/","url_meta":{"origin":262713,"position":0},"title":"align-items","date":"April 11, 2013","format":false,"excerpt":"The align-items property is related to CSS layout. It effects how elements are aligned both in Flexbox and Grid layouts. .container { display: flex; align-items: flex-start; } align-items in Flexboxalign-items in Grid Syntax align-items: flex-start | flex-end | center | baseline | stretch The align-items property defines the default behavior\u2026","rel":"","context":"With 6 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":326605,"url":"https:\/\/css-tricks.com\/almanac\/properties\/j\/justify-items\/","url_meta":{"origin":262713,"position":1},"title":"justify-items","date":"December 2, 2020","format":false,"excerpt":"The justify-items property is a sub-property of the CSS Box Alignment Module which basically controls the alignment of grid items within their scope. .element { justify-items: center; } justify-items aligns grid items along the row (inline) axis. Specifically, this property allows you to set alignment for items inside a grid\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":343682,"url":"https:\/\/css-tricks.com\/snippets\/css\/complete-guide-grid\/","url_meta":{"origin":262713,"position":2},"title":"A Complete Guide to CSS Grid","date":"May 12, 2021","format":false,"excerpt":"Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.","rel":"","context":"In \"grid\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/grid-guide.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":335691,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/place-self\/","url_meta":{"origin":262713,"position":3},"title":"place-self","date":"March 2, 2021","format":false,"excerpt":"The place-self property in CSS is shorthand for the align-self and justify-self properties, combining them into a single declaration in CSS Grid and Flexbox layouts, where align-self and justify-self (CSS Grid only) are values that align an individual item in the block and inline directions. .element { place-self: center start;\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":177032,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-row-column\/","url_meta":{"origin":262713,"position":4},"title":"grid-row \/ grid-column","date":"July 30, 2014","format":false,"excerpt":"The grid-row and grid-column properties define which row or column an element will be displayed on. .element { grid-row: 1 \/ 2; grid-column: 3 \/ -1; } Here's an explicit 3 \u00d7 3 grid where these properties are used to place grid items onto it in specific places: CodePen Embed\u2026","rel":"","context":"In \"grid\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":21081,"url":"https:\/\/css-tricks.com\/almanac\/properties\/j\/justify-content\/","url_meta":{"origin":262713,"position":5},"title":"justify-content","date":"April 17, 2013","format":false,"excerpt":"The justify-content property is a sub-property of the Flexible Box Layout module. It defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts\u2026","rel":"","context":"With 22 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/262713"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=262713"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/262713\/revisions"}],"predecessor-version":[{"id":340536,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/262713\/revisions\/340536"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13941"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=262713"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=262713"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}