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;

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

## Related Posts/Links (MUST CHECK OUT)
Get the [daily.dev](https://api.daily.dev/get?r=rahxuls) extesnsion for busy developers.
Thanks Thanks for reading
Hope it's useful for you
`LIKE` -> `SHARE` -> `SUBSCRIBE`

© 2020 RAHULISM • Developed with ❤️ and 🍕 by RAHUL