Digamos que tengo este diseño:
.grid {
display: grid;
grid-template: auto / auto 64px 80px 64px auto;
height: 100%;
width: 100%;
}<div class='grid'>
<div style="background-color: red">This is a test. How do I make it symmetrical?</div>
<div style="background-color: green"></div>
<div style="background-color: yellow"></div>
<div style="background-color: blue"></div>
<div style="background-color: pink"></div>
</div>Me gustaría forzar que el diseño sea simétrico, independientemente del contenido, ¿cómo hago esto?
EDITAR
Esto no es un duplicado (aunque lo parece a primera vista):
¿Cómo se interpreta "grid-template-rows: auto auto 1fr auto"?
se trata de cómo 1fr y autotrabajar
CSS Grid: ¿puede restringir la columna automática?
trata sobre el desbordamiento de la imagen de una columna automática.
Esta pregunta trata sobre cómo hacer simétrico un diseño simple.
Una respuesta es usar en 1frlugar de auto!
.grid {
display:grid;
grid-template: auto / 1fr 64px 80px 64px 1fr;
height: 100%;
width: 100%;
}<div class='grid'>
<div style="background-color: red">This is a test. How do I make it symmetrical?</div>
<div style="background-color: green"></div>
<div style="background-color: yellow"></div>
<div style="background-color: blue"></div>
<div style="background-color: pink"></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