html - Diseño de cuadrícula CSS cuadrada
css3 css-grid (4)
** La respuesta de @fcalderan resuelve el problema y todos los créditos reservados. **
Esto obviamente rompe la forma cuadrada, pero si está usando cualquier texto, un pequeño ajuste funcionará a su favor.
Podría usar el elemento
::after
pseudo element para no presionar o dividir el contenido potencial.
Cambiar a
display: block
también elimina la necesidad de
vertical-aling: top
, que yo sepa.
Para preservar aún más la relación de aspecto cuando se usa texto, haría la
position: absolute
del texto
position: absolute
.
Vea el fragmento a continuación cuando use
::before
vs.
::after
para ilustrar mi punto.
.container,
.container2 {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 5px;
}
.container div {
background-color: red;
}
.container div::before {
content: "";
padding-bottom: 100%;
display: inline-block;
vertical-align: top;
}
.container2 div::after {
content: "";
padding-bottom: 100%;
display: block;
}
.container2 .text {
position: absolute;
}
.container2 div {
background-color: green;
position: relative;
overflow: hidden;
}
<div class="container">
<div>
<div class="text">Here is some text.</div>
</div>
<div>
<div class="text">Here is some more text.</div>
</div>
<div>
<div class="text">Here is some longer text that will break how this looks.</div>
</div>
</div>
<hr>
<div class="container2">
<div>
<div class="text">Here is some text.</div>
</div>
<div>
<div class="text">Here is some more text.</div>
</div>
<div>
<div class="text">Here is some longer text that will break how this looks.</div>
</div>
</div>
Esta pregunta ya tiene una respuesta aquí:
- Un diseño de cuadrícula con cuadrados de respuesta 3 respuestas
Estoy tratando de crear cuadrícula / diseño consiste en cuadrados. Cuatro cuadrados en cada fila. Los cuadrados no se pueden distorsionar en el tamaño de la pantalla. El ancho y la altura deben ser iguales todo el tiempo (no quiero valores fijos). Debo usar la rejilla de CSS. Alguien puede ayudarme ?
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 5px;
}
.container div {
background-color: red;
}
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Otro truco donde puedes poner cualquier contenido dentro sin romper la proporción. La idea es tener la cuadrícula dentro de un cuadrado grande que se divide en cuadrados pequeños:
.container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-gap: 5px;
}
.container div {
background-color: red;
}
body:before {
content: "";
display: block;
padding-top: 100%;
}
body {
position: relative;
margin: 0;
}
img {
max-width: 100%;
max-height: 100%;
}
<div class="container">
<div>any contet here</div>
<div>any contet here any contet here</div>
<div></div>
<div></div>
<div><img src="https://picsum.photos/200/300?image=1069"></div>
<div></div>
<div><img src="https://picsum.photos/200/200?image=1062"></div>
<div>any contet here any contet here</div>
<div>any contet here any contet here</div>
<div></div>
<div></div>
<div><img src="https://picsum.photos/200/200?image=1062"></div>
<div></div>
</div>
Otra sintaxis sin
position:absolute
donde puede confiar en la función de estiramiento de flexbox:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-gap: 5px;
flex-grow:1;
}
.container div {
background-color: red;
}
body:before {
content: "";
padding-top: 100%;
}
body {
display:flex;
}
img {
max-width: 100%;
max-height: 100%;
}
<div class="container">
<div>any contet here</div>
<div>any contet here any contet here</div>
<div></div>
<div></div>
<div><img src="https://picsum.photos/200/300?image=1069"></div>
<div></div>
<div><img src="https://picsum.photos/200/200?image=1062"></div>
<div>any contet here any contet here</div>
<div>any contet here any contet here</div>
<div></div>
<div></div>
<div><img src="https://picsum.photos/200/200?image=1062"></div>
<div></div>
</div>
Puede controlar el límite de filas.
En lo anterior, hice 4, podemos tener solo 2 haciendo el relleno
50%
lugar de
100%
.
Tendremos un gran rectángulo en el interior donde tendremos 8 cuadrados (4 en cada fila).
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 5px;
flex-grow:1;
}
.container div {
background-color: red;
}
body:before {
content: "";
padding-top: 50%;
}
body {
display:flex;
margin: 0;
}
img {
max-width: 100%;
max-height: 100%;
}
<div class="container">
<div>any contet here</div>
<div>any contet here any contet here</div>
<div></div>
<div></div>
<div><img src="https://picsum.photos/200/300?image=1069"></div>
<div></div>
<div><img src="https://picsum.photos/200/200?image=1062"></div>
</div>
Puedes controlar el número de filas usando variables CSS:
:root {
--n:6;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: repeat(var(--n),1fr);
grid-gap: 5px;
flex-grow:1;
}
.container div {
background-color: red;
}
body:before {
content: "";
padding-top: calc(var(--n) * 25%);
}
body {
display:flex;
}
img {
max-width: 100%;
max-height: 100%;
display:block;
}
<div class="container">
<div>any contet here</div>
<div>any contet here any contet here</div>
<div></div>
<div></div>
<div><img src="https://picsum.photos/200/300?image=1069"></div>
<div></div>
<div><img src="https://picsum.photos/200/200?image=1062"></div>
<div>any contet here</div>
<div>any contet here any contet here</div>
<div></div>
<div></div>
<div><img src="https://picsum.photos/200/300?image=1069"></div>
<div></div>
<div><img src="https://picsum.photos/200/200?image=1062"></div>
<div></div>
<div></div>
<div><img src="https://picsum.photos/200/300?image=1069"></div>
<div></div>
<div><img src="https://picsum.photos/200/200?image=1062"></div>
<div>any contet here any contet here</div>
<div></div>
<div></div>
</div>
También podemos agregar un control sobre el número de columnas agregando otra variable para tener algo más genérico:
:root {
--n:6;
--m:6;
}
.container {
display: grid;
grid-template-columns: repeat(var(--m),1fr);
grid-template-rows: repeat(var(--n),1fr);
grid-gap: 5px;
flex-grow:1;
}
.container div {
background-color: red;
}
body:before {
content: "";
padding-top: calc(var(--n)/var(--m) * 100%);
}
body {
display:flex;
}
img {
max-width: 100%;
max-height: 100%;
}
<div class="container">
<div>any contet here</div>
<div>any contet here any contet here</div>
<div></div>
<div></div>
<div><img src="https://picsum.photos/200/300?image=1069"></div>
<div></div>
<div><img src="https://picsum.photos/200/200?image=1062"></div>
<div>any contet here</div>
<div>any contet here any contet here</div>
<div></div>
<div></div>
<div><img src="https://picsum.photos/200/300?image=1069"></div>
<div></div>
<div><img src="https://picsum.photos/200/200?image=1062"></div>
<div></div>
<div></div>
<div><img src="https://picsum.photos/200/300?image=1069"></div>
<div></div>
<div><img src="https://picsum.photos/200/200?image=1062"></div>
<div>any contet here any contet here</div>
<div></div>
<div></div>
</div>
Por la diversión, curiosidad del comportamiento de
grid
y para evitar un pseudo elemento,
También puede establecer una altura igual al ancho de su contenedor de cuadrícula, el sistema de cuadrícula estirará automáticamente las filas.
Un buen recordatorio para la mente:
https://css-tricks.com/snippets/css/complete-guide-grid/
y ejemplos https://gridbyexample.com/
Ejemplo de trabajo si su cuadrícula usa todo el ancho del navegador.
* {
margin: 0;
padding: 0;
}
.container {
display: grid;
height: calc(50vw - 5px); /*instead playing around with grid gap gap */
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.container div {
/* bg to show i''m squarred or not ? */
background-image: linear-gradient( 45deg, transparent 50%, rgba(0, 0, 0, 0.5) 50%);
margin: 0 5px 5px 0; /*instead playing around with grid gap gap */
background-color: red;
}
/* extra for demo, not needed */
.container {
counter-reset: test;
}
.container div {
display: flex; /* or grid */
}
.container div:before {
counter-increment: test;
content: ''Div N°:''counter(test)'' -'';
margin: auto;/* center me */
color: yellow;
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Solo con CSS, podría usar un pseudoelemento para mantener siempre la relación de aspecto en
1:1
, por ejemplo
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 5px;
}
.container div {
background-color: red;
}
.container div::before {
content: "";
padding-bottom: 100%;
display: inline-block;
vertical-align: top;
}
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>