it-swarm.com.ru

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>

А вот и гифка:

 gif of what I'm seeing

Как примечание, если кто-нибудь может сказать мне, как я мог бы избежать указания ширины всех элементов, как я с grid-template-columns, это было бы здорово. Я бы предпочел, чтобы дети указывали свою ширину.

57
kentcdodds

Используйте auto-fill или auto-fit в качестве номера повторения нотации 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>

Сетка будет повторять столько дорожек, сколько возможно, без переполнения контейнера. 

 Using auto-fill as the repetition number of the repeat() notation

В этом случае, учитывая приведенный выше пример (см. Изображение), только 5 дорожек могут уместиться в контейнер-сетку без переполнения. В нашей сетке всего 4 элемента, поэтому пятый создается как пустой трек в оставшемся пространстве.

Оставшееся место, дорожка № 6, завершает явную сетку. Это означает, что не было достаточно места для размещения другой дорожки.


auto-fit

Ключевое слово auto-fit ведет себя так же, как auto-fill, за исключением того, что после алгоритм размещения элемента сетки любые пустые дорожки в оставшемся пространстве будут свернуты в 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>

Сетка по-прежнему будет повторять столько дорожек, сколько возможно, без переполнения контейнера, но пустые дорожки будут свернуты в 0.

Свернутая дорожка рассматривается как имеющая фиксированную функцию определения размера дорожки 0px.

 Using auto-fit as the repetition number of the repeat() notation

В отличие от примера изображения auto-fill, пустая пятая дорожка свернута, заканчивая явную сетку сразу после 4-го элемента.


auto-fill vs auto-fit

Разница между ними заметна, когда используется функция minmax() .

Используйте minmax(186px, 1fr), чтобы ранжировать элементы от 186px до 186px плюс часть оставшегося пространства в сеточном контейнере.

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

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

При использовании auto-fit элементы будут увеличиваться, чтобы заполнить оставшееся пространство, потому что все пустые дорожки свернуты в 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>


Детская площадка:

CodePen

Проверка автозаполнения треков

 auto-fill


Проверка автоподгонки дорожек

 auto-fit

93
Ricky

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

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

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

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

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

 enter image description here

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

 enter image description here

13
keithjgrant

вы ищете 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.

6
alanbuchanan

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

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

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

Мой метод - родительский 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>

0
I haz kode