CSS place-items property

Description

CSS place-items property controls the alignment of the child items vertically and horizontally. It is a shorthand property of align-items and justify-items.


We are using a grid container as an example.

Syntax

place-items : align-items    justify-items

Property values

align-items

normalDefault

It stretches out the child elements so as to fill the height of the container completely.

align-items: normal;

baseline

It aligns multiple objects (elements) on same baseline such as cells within a row.

align-items: baseline;

center

It aligns the content at the middle of cotainer.

align-items: center;

stretch

It stretches all of the objects (elements) in such a way that they occupy the full height of the container.

align-items: stretch;

flex-start

flex-start aligns the content at the start of flex container.

align-items: flex-start;

flex-end

flex-end aligns the content at the end of the flex container.

align-items: flex-end;

justify-items

autoDefault

It stretches out the element vertically to fill the width of container completely.

justify-items: auto;

baseline

It aligns the element on the baseline.

justify-items: baseline;

center

It aligns the content at the middle of cotainer.

justify-items: center;

stretch

It stretches the element so as fill the width of container completely.

justify-items: stretch;

flex-start

flex-start aligns the current element at the start of flex container.

justify-items: flex-start;

flex-end

flex-end aligns the current element at the end of the flex container.

justify-items: flex-end;

Applicable to

It applies to all elements


#CSS digger
Was this article helpful?

 

#First 1

×

Ctrl+D