inline-size explained : CSS

inline-size explained : CSS

·

2 min read

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.



Get the daily.dev extesnsion for busy developers.


Thanks Thanks for reading
Hope it's useful for you
LIKE -> SHARE -> SUBSCRIBE

Did you find this article valuable?

Support Rahul by becoming a sponsor. Any amount is appreciated!