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;
}
See the Pen RwRKQNr by rahxuls
(@rahxuls) on CodePen.
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 youLIKE
->SHARE
->SUBSCRIBE