Tengo un divque está configurado en display: gridy esta cuadrícula tiene tres columnas. En la primera columna, tengo un elemento grande que ocupa dos filas. En este momento, debido a que ese elemento es más grande que todo lo demás, las dos filas que abarca se establecen a la misma altura. Quiero que la primera fila se ajuste al contenido y la segunda fila para llenar el resto del espacio (algo así como una flex-grow: 1pero para cuadrículas). ¿Cómo haría esto?
<style>
.container {
display: grid;
}
.large__item {
grid-row: 1 / 3;
height: 100px;
}
.item__one {
grid-column: 2;
grid-row: 1
}
.item__two {
grid-column: 2;
grid-row: 2
}
</style>
<div class="container">
<!--Height is actually unknown-->
<div class="large__item"></div>
<!--Should fit to content-->
<div class="item__one">Content</div>
<!--Should fill rest of space-->
<div class="item__two">Fill</div>
</div>
Debe definir los tamaños de las filas en la grid-template-rowsregla de esta manera grid-template-rows: max-content auto, esto creará dos filas, la primera será la altura del contenido y la segunda será autola altura del elemento más grande que se extiende por las dos filas.
.container {
display: grid;
grid-template-rows: max-content auto;
background-color: red;
}
.large-item {
grid-column: 1 / 2;
grid-row: 1 / 3;
background-color: gray;
}
.item-one {
grid-column: 2;
grid-row: 1;
background-color: blue;
}
.item-two {
grid-column: 2;
grid-row: 2;
background-color: yellow;
}<div class="container">
<div class="large-item">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis ipsam debitis sint? Aperiam, saepe alias. Possimus excepturi fugit inventore consectetur ipsam distinctio maiores, vero veniam ad quas numquam at repellat? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis ipsam debitis sint? Aperiam, saepe alias. Possimus excepturi fugit inventore consectetur ipsam distinctio maiores, vero veniam ad quas numquam at repellat? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis ipsam debitis sint? Aperiam, saepe alias. Possimus excepturi fugit inventore consectetur ipsam distinctio maiores, vero veniam ad quas numquam at repellat? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis ipsam debitis sint? Aperiam, saepe alias. Possimus excepturi fugit inventore consectetur ipsam distinctio maiores, vero veniam ad quas numquam at repellat? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis ipsam debitis sint? Aperiam, saepe alias. Possimus excepturi fugit inventore consectetur ipsam distinctio maiores, vero veniam ad quas numquam at repellat? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis ipsam debitis sint? Aperiam, saepe alias. Possimus excepturi fugit inventore consectetur ipsam distinctio maiores, vero veniam ad quas numquam at repellat?Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis ipsam debitis sint? Aperiam, saepe alias. Possimus excepturi fugit inventore consectetur ipsam distinctio maiores, vero veniam ad quas numquam at repellat? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis ipsam debitis sint? Aperiam, saepe alias. Possimus excepturi fugit inventore consectetur ipsam distinctio maiores, vero veniam ad quas numquam at repellat? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis ipsam debitis sint? Aperiam, saepe alias. Possimus excepturi fugit inventore consectetur ipsam distinctio maiores, vero veniam ad quas numquam at</div>
<div class="item-one">Content</div>
<div class="item-two">repellat?</div>
</div>Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras