{"id":336695,"date":"2021-03-18T12:08:48","date_gmt":"2021-03-18T19:08:48","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=336695"},"modified":"2022-04-28T12:13:31","modified_gmt":"2022-04-28T19:13:31","slug":"justify-self","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/j\/justify-self\/","title":{"rendered":"justify-self"},"content":{"rendered":"\n<p>The <code>justify-self<\/code> property in CSS sets the justification of an element within its containing block. Its behavior depends on the <code>display<\/code> of the containing block. For example, if the containing block is a grid container (i.e. <code>display: grid<\/code>), we can justify the element in it along the &#8220;inline&#8221; axis (which, in turn, can be vertical or horizontal based on the content <code>direction<\/code>).<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  justify-self: start;\n}<\/code><\/pre>\n\n\n\n<!--more-->\n\n\n\n<p><code>justify-self<\/code> is defined in the <a href=\"https:\/\/drafts.csswg.org\/css-align-3\/#propdef-justify-self\" rel=\"noopener\">CSS Box Alignment Module Level 3 specification<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-let-s-talk-about-direction\">Let&#8217;s talk about direction<\/h3>\n\n\n<p>Direction is a relative thing in CSS. You may be used to thinking of direction in terms of offsets, like <code>top<\/code>, <code>bottom<\/code>, <code>left<\/code> and <code>right<\/code>. But not all languages think in the same left-to-right (LTR) orientation. That&#8217;s why CSS is leaning hard in the <em>direction<\/em> (pun intended) of <strong>logical properties<\/strong>.<\/p>\n\n\n\n<p>Logical properties in CSS take the <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/d\/direction\/\">direction<\/a><\/code>, <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-orientation\/\">text-orientation<\/a><\/code>, and <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/w\/writing-mode\/\">writing-mode<\/a><\/code> of the content into consideration, then treat the inline and block directions accordingly. So, in a left-to-right writing mode, inline means left and right, and block means top and bottom. In a vertical writing mode, inline means top and bottom, and block means left and right. That&#8217;s the &#8220;logic&#8221; in logical properties, like <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/margin-inline\/\">margin-inline<\/a><\/code> and <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/margin-block\/\">margin-block<\/a><\/code> among many other properties.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/logical-properties-diagram.png?ssl=1\" alt=\"\" class=\"wp-image-302911\" data-recalc-dims=\"1\"\/><figcaption>In \u201cnormal\u201d LTR writing conditions, the vertical axis will have the suffix&nbsp;<code>-block<\/code>&nbsp;and the horizontal axis will have the suffix&nbsp;<code>-inline<\/code>, both followed by&nbsp;<code>start<\/code>&nbsp;or&nbsp;<code>end<\/code>.<\/figcaption><\/figure>\n\n\n\n<p>What does this have to do with <code>justify-self<\/code>? Well, it uses keyword values\u2009\u2014\u2009like <code>start<\/code> and <code>end<\/code>\u2009\u2014\u2009that mean different things in different contexts. <code>justify-self<\/code> aligns an element along the <em>inline<\/em> axis which is horizontal in an LTR writing mode, but otherwise vertical.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-syntax\">Syntax<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">justify-self: auto | normal | stretch | &lt;baseline-position> | &lt;overflow-position>? [ &lt;self-position> | left | right ]<\/code><\/pre>\n\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-values\">Values<\/h3>\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">\/* Basic keywords *\/\njustify-self: auto;\njustify-self: normal;\njustify-self: stretch;\n\n\/* Postion keywords *\/\njustify-self: start;\njustify-self: end;\njustify-self: center;\njustify-self: left;\njustify-self: right;\njustify-self: flex-start;\njustify-self: flex-end;\njustify-self: self-start;\njustify-self: self-end;\n\n\/* Baseline keywords *\/\njustify-self: baseline;\njustify-self: first-baseline;\njustify-self: last-baseline;\n\n\/* Overflow keywords *\/\njustify-self: safe center;\njustify-self: unsafe center;\n\n\/* Global keywords *\/\njustify-self: inherit;\njustify-self: initial;\njustify-self: unset;<\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-basic-keyword-values\">Basic keyword values<\/h4>\n\n\n<ul><li><strong><code>auto<\/code>:<\/strong> The default value. It behaves like the <code>normal<\/code> value when the element isn&#8217;t contained within a parent, and when the element is inside a parent that is absolutely-positioned (i.e. <code>position: absolute<\/code>). Otherwise, it&#8217;ll inherit the <code>justify-items<\/code> value of the parent element, like when the element is in a grid container.<\/li><li><strong><code>normal<\/code>:<\/strong> Takes the default alignment of the box that contains the element. So, this could behave in a number of ways depending the containing element&#8217;s layout mode, whether it&#8217;s a normal block layout or something else, like a grid container.<ul><li>Block-level layouts (<code>start<\/code>)<\/li><li>Grid layouts&nbsp;<code>stretch<\/code><\/li><li>Flexbox (ignored)<\/li><li>Table cells (ignored)<\/li><li>Absolutely-positioned layouts (<code>start<\/code>)<\/li><li>Absolutely-positioned boxes (<code>stretch<\/code>)<\/li><li>Replaced absolutely-positioned boxes (<code>start<\/code>)<\/li><\/ul><\/li><li><strong><code>stretch<\/code>:<\/strong> This forces the element to take up as much space as it can in the containing element, taking other items in the container into consideration, of course. How much does it stretch? It depends on the computed <code>width<\/code> and <code>height<\/code> of the element itself, which need to be set to <code>auto<\/code> for this value to take effect. And heads up: if either margin along the alignment axis is set to <code>auto<\/code>, we don&#8217;t get any stretching.<\/li><\/ul>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  justify-self: stretch;\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2018\/11\/justify-self-stretch.svg\" alt=\"\" class=\"wp-image-279274\" width=\"350\" height=\"NaN\"\/><\/figure>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-position-keyword-values\">Position keyword values<\/h4>\n\n\n<ul id=\"block-a3578835-f384-4959-89b1-2566687bc834\"><li><strong><code>start<\/code>:<\/strong> The element is &#8220;packed&#8221; along the starting edge of the container. By &#8220;packed&#8221; we mean the element&#8217;s starting edge aligns with the container&#8217;s starting edge and the element doesn&#8217;t stretch to fill the rest of the available space.<\/li><li><strong><code>end<\/code>:<\/strong> The element is &#8220;packed&#8221; along the ending edge of the container.<\/li><li><strong><code>center<\/code>:<\/strong> The element is packed along the center of the alignment axis.<\/li><li><strong><code>left<\/code>:<\/strong> The element is packed along the left edge of the container. If the alignment axis is inline, then this is effectively the same thing as <code>start<\/code>.<\/li><li><strong><code>right<\/code>:<\/strong> The element is packed along the right edge of the container. If the alignment axis is inline, then this is effectively the same thing as <code>end<\/code>.<\/li><li><strong><code>flex-start<\/code>:<\/strong> When the element is not a flex item in a flexible container (i.e. a container not set to <code>display: flex<\/code>), this value behaves like <code>start<\/code>.<\/li><li><strong><code>flex-end<\/code>:<\/strong> When the element is not a flex item in a flexible container, this value behaves like <code>end<\/code>.<\/li><li><strong><code>self-start<\/code>:<\/strong> The element is packed along its own starting edge, which depends on its direction.<\/li><li><strong><code>self-end<\/code>:<\/strong> The element is packed along its own ending edge, which depends on its direction.<\/li><\/ul>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  justify-self: start;\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2018\/11\/justify-self-start.svg\" alt=\"\" class=\"wp-image-279271\" width=\"350\"\/><\/figure>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  justify-self: end;\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2018\/11\/justify-self-end.svg\" alt=\"\" class=\"wp-image-279273\" width=\"350\"\/><\/figure>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  justify-self: center;\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2018\/11\/justify-self-center.svg\" alt=\"\" class=\"wp-image-279275\" width=\"350\"\/><\/figure>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-baseline-keyword-values\">Baseline keyword values<\/h4>\n\n\n<p>These align the element&#8217;s first or last baseline with the corresponding baseline of its alignment context.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  justify-items: &lt;first | last> baseline;\n}<\/code><\/pre>\n\n\n\n<ul id=\"block-9345d7c3-2b71-442b-aec1-b368ae310567\"><li>The fallback alignment for&nbsp;<code>first baseline<\/code>&nbsp;is&nbsp;<code>safe start<\/code>.<\/li><li>The fallback alignment for&nbsp;<code>last baseline<\/code>&nbsp;is&nbsp;<code>safe end<\/code>.<\/li><li><code>baseline<\/code>&nbsp;corresponds to&nbsp;<code>first baseline<\/code>&nbsp;when used alone.<\/li><\/ul>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-overflow-keyword-values\">Overflow keyword values<\/h4>\n\n\n<p>The&nbsp;<strong>overflow<\/strong>&nbsp;property&nbsp;determines how it will display the contents of the grid when the content exceeds the grid\u2019s boundary limits. So, when the contents are larger than the alignment container, it will result in overflow&nbsp;<a href=\"https:\/\/css-tricks.com\/overflow-and-data-loss-in-css\/\">which might lead to data loss<\/a>. To prevent this, we can use the&nbsp;<code>safe<\/code>&nbsp;value which tells browser to change alignment so that there is no data loss.<\/p>\n\n\n\n<ul id=\"block-de9bc093-30cf-4922-8652-246c1af9ca7c\"><li><strong><code>safe<\/code>:<\/strong> The element will behave as though the alignment mode is <code>start<\/code> if it overflows the containing element.<\/li><li><strong><code>unsafe<\/code>:<\/strong> The element&#8217;s alignment value is respected, regardless of the size of the containing element which allows the element to overflow the containing element if its size exceeds the available space.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-demo\">Demo<\/h3>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ExNBWWx\" src=\"\/\/codepen.io\/anon\/embed\/ExNBWWx?height=600&amp;theme-id=1&amp;slug-hash=ExNBWWx&amp;default-tab=result\" height=\"600\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ExNBWWx\" title=\"CodePen Embed ExNBWWx\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-more-information\">More information<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card article\" id=\"mini-post-336695\">\n\n  <time datetime=\"2018-01-04\" title=\"Originally published Mar 18, 2021\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jan 4, 2018  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/fun-times-sizing-grid-elements\/\">\n      Fun Times With Sizing Grid Elements    <\/a>\n  <\/h3>\n\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<article class=\"in-article-card article\" id=\"mini-post-336695\">\n\n  <time datetime=\"2017-11-10\" title=\"Originally published Mar 18, 2021\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Nov 12, 2017  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/grid-areas-element-occupies-arent-necessarily-size\/\">\n      Grid areas and the element that occupies them aren&#8217;t necessarily the same size.    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?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\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \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-336695\">\n\n  <time datetime=\"2013-04-17\" title=\"Originally published Mar 18, 2021\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Jul 28, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/a\/align-content\/\">\n      align-content    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/a\/align-content\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { align-content: space-around; }<\/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-336695\">\n\n  <time datetime=\"2013-04-11\" title=\"Originally published Mar 18, 2021\">\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-336695\">\n\n  <time datetime=\"2013-04-19\" title=\"Originally published Mar 18, 2021\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Dec 27, 2018  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/a\/align-self\/\">\n      align-self    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/a\/align-self\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.box { align-self: flex-end; }<\/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-336695\">\n\n  <time datetime=\"2013-04-17\" title=\"Originally published Mar 18, 2021\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Sep 22, 2022  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/j\/justify-content\/\">\n      justify-content    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/j\/justify-content\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { justify-content: center; }<\/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-336695\">\n\n  <time datetime=\"2020-12-02\" title=\"Originally published Mar 18, 2021\">\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-336695\">\n\n  <time datetime=\"2017-11-29\" title=\"Originally published Mar 18, 2021\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    May 13, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/p\/place-items\/\">\n      place-items    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/p\/place-items\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { place-items: center; }<\/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 justify-self property in CSS sets the justification of an element within its containing block. Its behavior depends on the display of the containing block. For example, if the containing block is a grid container (i.e. display: grid), we can justify the element in it along the &#8220;inline&#8221; axis (which, in turn, can be vertical [&hellip;]<\/p>\n","protected":false},"author":2508,"featured_media":300990,"parent":13929,"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":335691,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/place-self\/","url_meta":{"origin":336695,"position":0},"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":262713,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/place-items\/","url_meta":{"origin":336695,"position":1},"title":"place-items","date":"November 29, 2017","format":false,"excerpt":"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: .center-inside-of-me { display: grid; place-items: center; } These properties have gained use with the introduction of Flexbox and Grid layouts,\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":326605,"url":"https:\/\/css-tricks.com\/almanac\/properties\/j\/justify-items\/","url_meta":{"origin":336695,"position":2},"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":340540,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/place-content\/","url_meta":{"origin":336695,"position":3},"title":"place-content","date":"May 13, 2021","format":false,"excerpt":"The place-content property in CSS is shorthand for the align-content and justify-content properties, combining them into a single declaration in CSS Grid and Flexbox layouts, where align-content and justify-content are values that align an individual item in the block and inline directions. .element { display: flex; place-content: start space-evenly; }\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":336695,"position":4},"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":21059,"url":"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/","url_meta":{"origin":336695,"position":5},"title":"A Complete Guide to Flexbox","date":"April 8, 2013","format":false,"excerpt":"Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart.","rel":"","context":"In \"flexbox\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/guide-flexbox.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/336695"}],"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=336695"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/336695\/revisions"}],"predecessor-version":[{"id":365502,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/336695\/revisions\/365502"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13929"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/300990"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=336695"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=336695"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}