3

Tengo un template creado con grid, uno de los item de ese grid tiene establecido el ancho, pero cuando se muestra, ese item se expande de igual manera.

¿Como puedo mantenerlo con el ancho fijo?

Mi código es el siguiente:

.container {
    display: grid;
    grid-template-areas:
        'img title'
        'img desc'
        'img date';
    width: 100%;
    grid-gap: 0px 10px;
}
.itemImg {
    width: 80px;
    height: 60px;
    grid-area: img;
    background-color: red;
}
.itemTitle {
    width: 100%;
    grid-area: title;
    background-color: green;
}
.itemDesc {
    width: 100%;
    grid-area: desc;
    background-color: blue;
}
.itemDate {
    width: 100%;
    grid-area: date;
    background-color: yellow;
}
<div class="container">
    <div class="itemImg">Imagen</div>
    <div class="itemTitle">Título</div>
    <div class="itemDesc">Descripción</div>
    <div class="itemDate">Fecha</div>
</div>

Como podéis ver, el .itemImg es el que tiene establecido un width fijo, pero aun así, se expande más.

1
  • No se entiende muy bien lo que quieres conseguir. ¿Podrías subir una imagen en la que se vea la colocación de las columnas que esperas? Ahora mismo, tal y como lo tienes, le estás diciendo al grid que quieres 3 filas de dos columnas en las que la primera columna de cada fila esté ocupada por una imagen y que la segunda columna de cada fila esté ocupada en la fila uno por el título, en la dos por la descripción y en la 3 por la fecha.
    – phpMyGuel
    el 18 oct. 2019 a las 10:59

1 respuesta 1

3

Creo que he entendido lo que quieres hacer. Lo único que te faltaría es especificar lo que quieres que ocupe cada una de las columnas. Lo que he entendido es que quieres que la imagen ocupe 80 píxeles de width y que el resto de la fila se ocupe por el contenido de la segunda columna.

Para ello puedes usar la propiedad grid-template-columns para especificarlo, ya que por defecto lo que te está sucediendo es que las columnas de cada fila se ven forzadas a ocupar lo mismo.

.container {
    display: grid;
    grid-template-areas:
        'img title'
        'img desc'
        'img date';
    width: 100%;
    grid-gap: 0px 10px;
    grid-template-columns: 80px 1fr;
}
.itemImg {
    grid-area: img;
    background-color: red;
}
.itemTitle {
    grid-area: title;
    background-color: green;
}
.itemDesc {
    grid-area: desc;
    background-color: blue;
}
.itemDate {
    grid-area: date;
    background-color: yellow;
}
<div class="container">
    <div class="itemImg">Imagen</div>
    <div class="itemTitle">Título</div>
    <div class="itemDesc">Descripción</div>
    <div class="itemDate">Fecha</div>
</div>

Con eso ya no te haría falta especificar la longitud de cada elemento, ya que grid-template-columns se ocupa de sus tamaños.

1
  • Perfecto! muchas gracias @phpMyGuel, es justo lo que necesitaba. el 18 oct. 2019 a las 11:31

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.