inline-size explained : CSS

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.

Syntax

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

DEMO

<div class="container">
  <header>
    <h1> vertical heading</h1>
  </header>
  <main>
    <h2>Title</h2>
    <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>
  </main>
</div>

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 :

Values

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;

• 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.

• inline-size browser support
• Top CSS resources you need for your next project
• Front-end Development roadmap with so many resources