inline-size explained : CSS

Subscribe to my newsletter and never miss my upcoming articles

The inline-size property in CSS is used to define the horizontal or vertical size of an element’s block. So here is my latest blog post on inline-size property.

If the writing mode is vertically oriented, the value of inline-size relates to the height of the element; otherwise, it relates to the width of the element. A related property is block-size, which defines the other dimension of the element.

The main purpose of inline-size property is that designing of the website.


inline-size: length, percentage, auto, inherit, initial, unset
writing-mode: ;  /* vertical-lr  or horizantal-lr*/


<div class="container">
    <h1> vertical heading</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit atque molestias et voluptatum recusandae nobis eos, tempore incidunt quidem molestiae hic similique quisquam soluta officia? Alias maiores possimus velit assumenda?</p>

And the CSS goes like this.....

 .container {
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-column-gap: 4rem;
header {
  writing-mode: vertical-lr;
  background: #f1f;
h2 {
  margin-block-start: 4rem;
h1 {
  margin-inline-start: 4rem;
  margin-block-start: 2rem;
  margin-block-end: 2rem;

The Output of the above will be :


Here are some values you can use when designing like pro.

/* Length values */
inline-size: 250px;
inline-size: 5rem;

/* Percentage values */
inline-size: 75%;

/* Keyword values */
inline-size: auto;
inline-size: fit-content(5rem);
inline-size: max-content;
inline-size: min-content;

/* Global values */
inline-size: inherit;
inline-size: initial;
inline-size: unset;

  • fit-content(): The fit-content() property use to defined function to put a limit on the maximum size of the division.

  • max-content: It is a keyword that represents a value, the preferred intrinsic width of an element, or the preferred intrinsic height of an element.

  • min-content: The min-content keyword represents the minimum value of the width without overflowing the contents of the element horizontally.

  • unset: The unset CSS keyword resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.

Get the extesnsion for busy developers.

Thanks Thanks for reading
Hope it's useful for you

Comments (2)

Jome Favourite's photo

I've never seen this property before until now. I'll check it out

Thanks for sharing 👍

Rahul's photo

Hope you find it useful.