if(true) { (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); } if (typeof ga === "function") { ga('create', 'G-EZ0B2QJ2Z6', 'auto', {}); }inline-size explained : CSS | RAHULISM

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