html - Diseño de cuadrícula CSS cuadrada

css3 css-grid

Question

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>

Answer 1

** 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>

Answer 2

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>

Answer 3

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>

Un codepen para bifurcar o jugar con

Answer 4

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>