CSS-сетка?

Можно ли сделать обертку CSS без использования медиа-запросов?

В моем случае у меня есть недетерминированное количество элементов, которые я хочу разместить в сетке, и я хочу, чтобы эта сетка была обернута. Используя flexbox, я не могу надежно проложить вещи. Я также хотел бы избежать кучи медиа-запросов.

Здесь примерный код:

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

Ответ 1

Используйте либо auto-fill либо auto-fit в качестве номера repeat() записи repeat().

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

`auto-fill`

Если в качестве номера повторения задано auto-fill, если контейнер сетки имеет определенный размер или максимальный размер на соответствующей оси, то число повторений является наибольшим возможным положительным целым числом, которое не приводит к тому, что сетка переполняет свой контейнер сетки.

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

Ответ 2

Вы хотите либо auto-fit, либо auto-fill внутри функции repeat():

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

Разница между двумя становится очевидной, если вы также используете minmax() для гибких размеров столбцов:

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

Это позволяет ваши столбцы гибки в размере от 186px до равных по ширине столбцов, простирающихся по всей ширине контейнера. auto-fill создаст столько столбцов, сколько будет соответствовать ширине. Если, скажем, пять столбцов подходят, хотя у вас всего четыре элемента сетки, будет пятый пустой столбец:

Использование auto-fit вместо этого предотвратит пустые столбцы, при необходимости растягивая ваши:

Ответ 3

вы ищете auto-fill?

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

Демо: http://codepen.io/alanbuchanan/pen/wJRMox

Чтобы более эффективно использовать доступное пространство, вы можете использовать minmax и передать в auto в качестве второго аргумента:

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

Демо: http://codepen.io/alanbuchanan/pen/jBXWLR

Если вам не нужны пустые столбцы, вы можете использовать auto-fit вместо auto-fill.

Ответ 4

Здесь моя попытка. Извините пух, я чувствовал себя более творчески.

Мой метод является родительским div с фиксированным размером. Остальное просто подгоняет контент внутри этого div соответственно.

Это будет масштабировать изображения независимо от формата. Будет без жесткой обрезки.

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>

Ответ 5

У меня была похожая ситуация. Помимо того, что вы сделали, я хотел центрировать свои столбцы в контейнере, не пропуская пустые столбцы для них влево или вправо:

.grid { 
    display: grid;
    grid-gap: 10px;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(200px, auto));
}