CSS min-inline-size

The min-inline-size CSS property defines the minimum inline size of a grid item. This property is part of the CSS Box Alignment Module Level 3, which provides features to align and distribute space among grid and flex items.

When using min-inline-size, you can ensure that a grid item always takes up a certain amount of space along the inline axis, even if the content inside the item is smaller. This can be useful for creating consistent layouts or preventing items from collapsing to zero width.

Let's see how to use min-inline-size with some examples:

Example:

.grid-item {
    min-inline-size: 200px;
    background-color: lightblue;
}