¿Envoltura de cuadrícula CSS?

Question

¿Envoltura de cuadrícula CSS?

¿Es posible hacer CSS grid wrap sin usar media queries?

En mi caso, tengo un número no determinista de elementos que quiero colocar en una cuadrícula y quiero que esa cuadrícula se envuelva. Al usar flexbox, no puedo espaciar las cosas de manera confiable. Me gustaría evitar un montón de consultas de medios también.

Aquí está algún código de ejemplo :

.grid {
  display: grid;
  grid-gap: 10px;
  grid-auto-flow: column;
  grid-template-columns: 186px 186px 186px 186px;
}

.grid > * {
  background-color: green;
  height: 200px;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Y aquí hay un gif:

Como nota al margen, si alguien puede decirme cómo Podría evitar especificar el ancho de todos los elementos como estoy con grid-template-columns eso sería genial. Preferiría que los niños especificaran su propio ancho.

40

css html css3 css-grid

Author: Michael_B, 2017-03-31

Source

4 answers

Quieres auto-fit o auto-fill dentro de la función repeat():

grid-template-columns: repeat(auto-fit, 186px);

La diferencia entre los dos se hace evidente si también se utiliza un minmax() para permitir tamaños de columna flexibles:

grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));

Esto permite que sus columnas se flexionen en tamaño, desde 186px hasta columnas de igual ancho que se extienden a lo largo de todo el ancho del contenedor. auto-fill creará tantas columnas como quepa en el ancho. Si, por ejemplo, caben cinco columnas, aunque solo tenga cuatro elementos de cuadrícula, habrá una quinta columna vacía:

Usar auto-fit en su lugar evitará columnas vacías, estirando las tuyas aún más si es necesario:

11

Author: keithjgrant,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-30 23:52:43

¿Estás buscando auto-fill?

grid-template-columns: repeat(auto-fill, 186px);

Demo: http://codepen.io/alanbuchanan/pen/wJRMox

Para usar el espacio disponible de manera más eficiente, puede usar minmax, y pasar auto como segundo argumento:

grid-template-columns: repeat(auto-fill, minmax(186px, auto));

Demo: http://codepen.io/alanbuchanan/pen/jBXWLR

Si no quieres las columnas vacías, puedes usar auto-fit en lugar de auto-fill.

6

Author: alanbuchanan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-30 22:56:03

Aquí está mi intento. Disculpe la pelusa, Me sentía extra creativo.

Mi método es un padre div con fijo dimensiones. El resto es solo encajar el contenido dentro de ese div en consecuencia.

Esto redimensionará las imágenes independientemente de la relación de aspecto. Tampoco habrácultivos duros .

body {
        background: #131418;
	text-align: center;
	margin: 0 auto;
}

.my-image-parent {
	display: inline-block;
	width: 300px;
	height: 300px;
	line-height: 300px; /* should match your div height */
	text-align: center;
	font-size: 0;
}

/* Start demonstration background fluff */
    .bg1 {background: url(https://unsplash.it/801/799);}
    .bg2 {background: url(https://unsplash.it/799/800);}
    .bg3 {background: url(https://unsplash.it/800/799);}
    .bg4 {background: url(https://unsplash.it/801/801);}
    .bg5 {background: url(https://unsplash.it/802/800);}
    .bg6 {background: url(https://unsplash.it/800/802);}
    .bg7 {background: url(https://unsplash.it/802/802);}
    .bg8 {background: url(https://unsplash.it/803/800);}
    .bg9 {background: url(https://unsplash.it/800/803);}
    .bg10 {background: url(https://unsplash.it/803/803);}
    .bg11 {background: url(https://unsplash.it/803/799);}
    .bg12 {background: url(https://unsplash.it/799/803);}
    .bg13 {background: url(https://unsplash.it/806/799);}
    .bg14 {background: url(https://unsplash.it/805/799);}
    .bg15 {background: url(https://unsplash.it/798/804);}
    .bg16 {background: url(https://unsplash.it/804/799);}
    .bg17 {background: url(https://unsplash.it/804/804);}
    .bg18 {background: url(https://unsplash.it/799/804);}
    .bg19 {background: url(https://unsplash.it/798/803);}
    .bg20 {background: url(https://unsplash.it/803/797);}
/* end demonstration background fluff */

.my-image {
	width: auto;
	height: 100%;
	vertical-align: middle;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

<div class="my-image-parent">
 <div class="my-image bg1"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg2"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg3"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg4"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg5"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg6"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg7"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg8"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg9"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg10"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg11"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg12"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg13"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg14"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg15"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg16"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg17"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg18"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg19"></div>
</div>

<div class="my-image-parent">
 <div class="my-image bg20"></div>
</div>

1

Author: I haz kode,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-23 05:46:11

score 55 · Accepted Answer

Utilizar auto-fill o auto-fit como el número de repeticiones de la repeat() la notación.

repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )

`auto-fill`

Cuando auto-fill se da como el número de repetición, si la cuadrícula contenedor tiene un tamaño definido o tamaño máximo en el eje relevante, entonces el número de repeticiones es el entero positivo más grande posible eso no hace que la red se desborde su contenedor de red.

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, 186px);
}

.grid>* {
  background-color: green;
  height: 200px;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

El grid repetirá tantas pistas como sea posible sin desbordar su contenedor.

En este caso, dado el ejemplo anterior (ver imagen), solo 5 pistas pueden caber en el contenedor de rejilla sin desbordarse. Solo hay 4 elementos en nuestra cuadrícula, por lo que se crea un quinto como una pista vacía dentro del espacio restante.

El resto del espacio restante, pista #6, termina la cuadrícula explícita. Esto significa que no había suficiente espacio para colocar otro pista.

`auto-fit`

La palabra clave auto-fit se comporta igual que auto-fill, excepto que después de algoritmo de colocación de elementos de cuadrícula cualquier pista vacía dentro del espacio restante se contraerá a 0.

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, 186px);
}

.grid>* {
  background-color: green;
  height: 200px;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

La cuadrícula seguirá repitiendo tantas pistas como sea posible sin desbordar su contenedor, pero las pistas vacías se colapsarán en 0.

Una pista colapsada se trata como si tuviera una función de dimensionamiento de pista fija de 0px.

A diferencia del ejemplo de imagen auto-fill, la quinta pista vacía se contrae, terminando la cuadrícula explícita justo después del 4to elemento.

`auto-fill` vs `auto-fit`

La diferencia entre los dos es notable cuando el minmax() se utiliza la función.

Use minmax(186px, 1fr) para variar los elementos de 186px a 186px más una fracción del espacio sobrante en el contenedor de cuadrícula.

Cuando se usa auto-fill, los elementos crecerán una vez no hay espacio para colocar pistas vacías.

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
}

.grid>* {
  background-color: green;
  height: 200px;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Cuando se usa auto-fit, los elementos crecerán para llenar el espacio restante porque todas las pistas vacías se contraen en 0px.

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
}

.grid>* {
  background-color: green;
  height: 200px;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Patio de recreo:

CodePen

Inspección de pistas de autocompletar

Inspección de pistas de ajuste automático

¿Envoltura de cuadrícula CSS?

4 answers

auto-fill

auto-fit

auto-fill vs auto-fit

CodePen

`auto-fill`

`auto-fit`

`auto-fill` vs `auto-fit`