Aug
10
CSS – justify-items Property ”; Previous Next CSS justify-items property provides a default alignment along the relevant axis for each box by setting the default justify-self for all box items. This property”s effect varies based on the layout mode in use: It aligns items in block-level layouts along the inline axis within their containing block. When elements are positioned absolutely, the items within the containing block are aligned on the inline axis, considering the specified top, left, bottom, and right offset values. This property is ignored in table cell layouts . This property is ignored in Flexbox layouts. Aligns the items inside the grid areas on the inline axis in grid layouts. Possible Values normal − This keyword”s effect is determined on the layout mode: Same as start in block-level layouts. Absolute positioning uses this keyword as a ”start” for replaced boxes and a ”stretch” for other absolute-positioned boxes. It has no meaning in table cell layouts because its property is ignored. It has no meaning in flexbox layouts because its property is ignored. This term acts as a ”stretch” for grid items, except boxes with an aspect ratio or intrinsic sizes, which act as a ”start”. start − Aligns the items at the start edge of the alignment container in the corresponding axis. end − Aligns the items at the end edge of the alignment container in the corresponding axis. center − Aligns the items at the centre of the alignment container. flex-start − This value is considered as start, by items that are not children of a flex container. flex-end − This value is considered as end, by items that are not children of a flex container. self-start − The items are aligned to the start edge of the alignment container in the appropriate axis. self-end − The items are aligned to the end edge of the alignment container in the appropriate axis. left − The items are aligned to the left edge of the alignment container. This value acts like start if the property”s axis is not parallel to the inline axis. right − The items are aligned to the right edge of the alignment container in the appropriate axis. This value acts like start if the property”s axis is not parallel to the inline axis. baseline, first baseline, last baseline − Defines alignment with the first or last baseline of a box in its baseline-sharing group, aligns the box”s first or last baseline set with the appropriate baseline, with start as the fallback for the first baseline and end for the last baseline. stretch − When the aggregate size of the items is less than the alignment container, auto-sized items are evenly enlarged, according to max-height/max-width limitations, the combined size fills the alignment container. safe − In case the size of the item overflows the alignment container, the alignment mode of the item is set as “start”. unsafe − The specified alignment value is honored regardless of the relative sizes of the item and alignment container. legacy − This value is inherited by box descendants. However, if a descendant has justify-self: auto, only left, right, or centre values are considered, not the legacy keyword. Applies To All elements. Syntax This property can take any of four forms: Basic keyword: The keyword values are normal or stretch. Baseline alignment: The baseline keyword with an additional first or last. Positional alignment: Choose from center, start, end, flex-start, flex-end, self-start, self-end, left, or right. also optionally unsafe or safe. Legacy alignment: Use the legacy keyword with left or right. Basic Keywords justify-items: normal; justify-items: stretch; Positional Alignment justify-items: center; justify-items: start; justify-items: end; justify-items: flex-start; justify-items: flex-end; justify-items: self-start; justify-items: self-end; justify-items: left; justify-items: right; Baseline Alignment justify-items: baseline; justify-items: first baseline; justify-items: last baseline; Overflow Alignment (for positional alignment only) justify-items: safe center; justify-items: unsafe center; Legacy Alignment justify-items: legacy right; justify-items: legacy left; justify-items: legacy center; CSS justify-items – normal Value The following example demonstrates the justify-items: normal property that aligns the items along the row axis within each grid cell with its default behavior − <html> <head> <style> .box { width: 100%; border: 2px solid black; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 40px; grid-gap: 10px; justify-items: normal; background-color: greenyellow; } .box > div { width: 100px; border: 2px solid blue; background-color: lightcoral; margin: 5px; text-align: center; } </style> </head> <body> <div class=”box”> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> <div>Item 4</div> </div> </body> </html> CSS justify-items – stretch Value The following example demonstrates the justify-items: stretch property that stretches the items along the row axis to fill the entire width of their columns − <html> <head> <style> .box { width: 100%; border: 2px solid black; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 40px; grid-gap: 10px; justify-items: stretch; background-color: greenyellow; } .box > div { border: 2px solid blue; background-color: lightcoral; margin: 5px; text-align: center; } </style> </head> <body> <div class=”box”> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> <div>Item 4</div> </div> </body> </html> CSS justify-items – start Value The following example demonstrates the justify-items: start property that aligns items against the start edge of the grid container − <html> <head> <style> .box { width: 100%; border: 2px solid black; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 40px; grid-gap: 10px; justify-items: start; background-color: greenyellow; } .box > div { width: 100px; border: 2px solid blue; background-color: lightcoral; margin: 5px; text-align: center; } </style> </head> <body> <div class=”box”> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div>