Skip to content

Instantly share code, notes, and snippets.

@mrroot5

mrroot5/cssgrid-avoid-content-overflow.css

Created July 21, 2019 16:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mrroot5/3a7935d42c7b93d03ee22e688031e8cd to your computer and use it in GitHub Desktop.
Save mrroot5/3a7935d42c7b93d03ee22e688031e8cd to your computer and use it in GitHub Desktop.
Download ZIP
Evitar desbordamiento del contenido en css grid. Avoid css grid content overflow
Raw
cssgrid-avoid-content-overflow.css
.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;
}
Raw
cssgrid-avoid-content-overflow.html
<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