Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Evitar desbordamiento del contenido en css grid. Avoid css grid content overflow
.highligth {
color: red;
}
.grid-container {
display: grid;
grid-template-columns: minmax(0, auto) minmax(0, auto) minmax(0, auto);
grid-template-rows: minmax(0, auto);
grid-gap: 0 1rem;
border: 2px solid black;
}
.item {
padding: 10px;
border-radius: 10px;
background-color: red;
}
.item-overflow-container {
padding: 10px;
border-radius: 10px;
background-color: yellow;
display: grid;
grid-template-columns: minmax(0, auto);
grid-template-rows: minmax(0, auto) minmax(0, auto) minmax(0, auto);
grid-gap: 1rem 0;
}
.item-overflow-item {
padding: 10px;
background-color: blue;
}
<html>
<head>
</head>
<body>
<h1>
Evitamos el overflow usando <span class="highligth">minmax(0, auto)</span> o <span class="highligth">fit-content</span>
</h1>
<div class="grid-container">
<div class="item item0">
<div class="item-overflow-container">
<div class="item-overflow-item">Subitem 0</div>
<div class="item-overflow-item">Subitem 1</div>
<div class="item-overflow-item">Subitem 2</div>
</div>
</div>
<div class="item item1">
<div>Item</div>
</div>
<div class="item item2">
<div>Item</div>
</div>
</div>
</body>
<html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.