CSS properties - place-related

revision: March 16, 2024

Content

place-content property

- is used in flexbox and grid layouts, and is a shorthand property for the following properties: "align-content", "justify-content".

If the place-content property has two values: {place-content: start center;} : align-content property value is 'start', justify-content property value is 'center'.
If the place-content property has one value : {place-content: end;} : align-content and justify-content property values are both 'end'

CSS syntax : place-content: normal | value | initial | inherit;

Property values:

normal : default value. Dependant on layout context. The same as setting no property value for align-content and justify-content.

stretch : "Grid": stretches grid items to fill the grid container if size is not set. "Flexbox": stretches flex items on the cross axis to fill the flex container if flex items have no specified size on the cross axis.

start : align items at the start of the container

end : align items at the end of the container

center : align items to the center of the container

space-between : distribute available extra space evenly between the elements inside the container on both axis.

space-around : distribute available extra space evenly around each element inside the container on both axis.

space-evenly : distribute elements inside the container evenly on both axis.

overflow-alignment : 'safe' sets alignment of the item to 'start' if the content overflows; 'unsafe' keeps the alignment value regardless of wether or not the item content overflows.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.placeContent="end space-around"

                    <div>
                        <p>Resize window to see the effect more clearly. The flex lines are placed at the bottom
                        of the container in the column direction, and the flex items are aligned with the same space 
                        between them in the row direction.</p>
                        <div id="container">
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                    <style>
                        #container {height: 12vw; width: 60%; border: solid black 0.1vw; display: flex; flex-wrap: wrap;
                            place-content: end space-between;}
                        #container > div {flex-basis: 2vw; height: 2vw; margin: 0.2vw; background-color: coral;}
                    </style>
                

place-items property

- is used in grid layouts, and is a shorthand property for the following properties: "align-items", "justify-items".

If the place-items property has two values: {place-item: start center;} : align-items property value is 'start', justify-items property value is 'center'.
If the place-items property has one value : {place-items: end;} : align-items and justify-items property values are both 'end'

CSS syntax : place-items: normal legacy | value | initial | inherit;;

Property values:

normal legacy : default. The element's default place-items value. The default value for align-items is 'normal', and the default value for justify-items is 'legacy'.

baseline : items are positioned at the baseline of the container

center : align items to the center of the grid cell

end : align items at the end of the grid cell

start : align items at the start of the grid cell

stretch : stretches grid items to fill the grid container if the grid item sizes are not set.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.placeItems="stretch center"

                    <div>
                        <p>The value 'start' set for the place-items property is the same as setting 'start' to both 
                        the align-items and justify-items properties. This means that each grid item is placed within
                        their grid cell at the start in the block direction and at the start in the inline direction.</p>
                        <div id="container-A">
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                    <style>
                        #container-A { width: 60%; aspect-ratio: 3/2; border: solid black 0.1vw; display: grid;
                            grid-template-columns: 1fr 1fr;grid-template-rows: 1fr 1fr; place-items: start;}
                        #container-A > div { width: 60%; aspect-ratio: 2; background-color: coral;}
                        
                    </style>
                

place-self property

- is used to align individual grid items, and is a shorthand property for the following properties: "align-self", "justify-self".

If the place-self property has two values: {place-self: start center;} : align-self property value is 'start', justify-self property value is 'center'.
If the place-self property has one value : {place-self: end;} : align-self and justify-self property values are both 'end'

CSS syntax : place-self: auto | value | initial | inherit;;

Property values:

auto : default. The element's default place-self value.

normal : dependent on layout context, but similar to 'stretch' for grid layout for grid items when size is not set. If size is set, the property value behaves like 'start'.

stretch : stretches to fill the grid cell if size is not set.

start : align items at the start in the inline and block directions

left : align items to the left in the inline direction, as the justify-self property value.

center : align items to the center

end : align items at the end in the inline and block directions

right : align items to the right in the inline direction, as the justify-self property value.

overflow-alignment :'safe' sets alignment of the item to 'start' if the content overflows; 'unsafe' keeps the alignment value regardless of wether or not the item content overflows.

baseline alignment : the element is aligned with the baseline of the parent.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.placeSelf="end stretch"

                    <div>
                        <p>Place an individual grid item in the block and inline directions with the place-self property.</p>
                        <div id="container-B">
                            <div></div>
                            <div id="myDiv"></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                    <style>
                        #container-B { width: 60%; aspect-ratio: 3/2; border: solid black 0.1vw; display: grid; 
                            grid-template-columns: 1fr 1fr;}
                        #container-B > div { width: 60%; aspect-ratio: 2; margin: 0.2vw; background-color: coral;}
                        #myDiv {border: solid black 0.3vw; place-self: end;}
                    </style>