CSS Grid с использованием плавающих элементов - PullRequest
Новая
       45

CSS Grid с использованием плавающих элементов

0 голосов
/ 05 июня 2019

Я пытаюсь реализовать простую сетку с 3 квадратными элементами в строке, и каждый элемент может иметь до 3 строк / столбцов. Вот что у меня есть:

https://jsfiddle.net/dt3u6840/

HTML: 

<div class="layout-grid">
 <a href="#" class="block" data-rows="2" data-cols="2"></a>
 <a href="#" class="block" data-rows="1" data-cols="1"></a>
 <a href="#" class="block" data-rows="1" data-cols="1"></a>
 <a href="#" class="block" data-rows="1" data-cols="1"></a>
 <a href="#" class="block" data-rows="1" data-cols="1"></a>
 <a href="#" class="block" data-rows="1" data-cols="1"></a>
 <a href="#" class="block" data-rows="1" data-cols="3"></a>
</div>

CSS: 

.layout-grid { overflow: hidden; max-width: 800px; width: 100%; }
.layout-grid .block { position: relative; display: block; float: left; background-color: green; height: auto; transition: all .3s ease; }
.layout-grid .block:hover { opacity: .2; }
.layout-grid .block:nth-child(odd) { background-color: blue; }
.layout-grid .block[data-cols="1"] { width: 33.33333333333%; }
.layout-grid .block[data-cols="2"] { width: 66.66666666666%; }
.layout-grid .block[data-cols="3"] { width: 100%; }
.layout-grid .block[data-rows="1"] { padding-top: 33.33333333333%; }
.layout-grid .block[data-rows="2"] { padding-top: 66.66666666666%; }
.layout-grid .block[data-rows="3"] { padding-top: 100%; }

Это прекрасно работает. Однако, если я пытаюсь добавить элемент с> 1 строк, это не так:

https://jsfiddle.net/pz4vhjw6/

НОВЫЙ HTML: 

<div class="layout-grid">
 <a href="#" class="block" data-rows="2" data-cols="2"></a>
 <a href="#" class="block" data-rows="1" data-cols="1"></a>
 <a href="#" class="block" data-rows="1" data-cols="1"></a>
 <a href="#" class="block" data-rows="1" data-cols="1"></a>
 <a href="#" class="block" data-rows="1" data-cols="1"></a>
 <a href="#" class="block" data-rows="2" data-cols="1"></a>
 <a href="#" class="block" data-rows="1" data-cols="1"></a>
 <a href="#" class="block" data-rows="1" data-cols="1"></a>
</div>

Могу ли я что-нибудь сделать, чтобы сделать эту работу?

1 Ответ

0 голосов
/ 06 июня 2019

Вы можете использовать CSS Grid layout здесь - не то, чтобы это поддерживалось только в современных браузерах (см. Информация о поддержке ).Здесь вы можете использовать макет из 3 столбцов и span строк и / или столбцов, чтобы получить желаемые макеты - см. Демонстрацию ниже с обоими макетами: 

.layout-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 columns */
  width: 100%;
  max-width: 800px;
}

.layout-grid .block {
  background-color: green;
  transition: all .3s ease;
  padding-top: 100%; /* set height of block */
}

.layout-grid .block:hover {
  opacity: .2;
}

.layout-grid .block:nth-child(odd) {
  background-color: blue;
}

.layout-grid .block[data-cols="2"] {
  grid-column: span 2; /* occupy 2 columns */
  grid-row: span 2; /* occupy 2 rows */
}

.layout-grid .block[data-cols="3"] {
  grid-column: span 3; /* occupy 3 columns */
  grid-row: span 3; /* occupy 3 rows */
}

.layout-grid .block[data-rows="2"] {
  grid-row: span 2; /* occupy 2 rows */
}

.layout-grid .block[data-rows="3"] {
  grid-row: span 3; /* occupy 3 rows */
}
<div class="layout-grid">
  <a href="#" class="block" data-rows="2" data-cols="2"></a>
  <a href="#" class="block" data-rows="1" data-cols="1"></a>
  <a href="#" class="block" data-rows="1" data-cols="1"></a>
  <a href="#" class="block" data-rows="1" data-cols="1"></a>
  <a href="#" class="block" data-rows="1" data-cols="1"></a>
  <a href="#" class="block" data-rows="1" data-cols="1"></a>
  <a href="#" class="block" data-rows="1" data-cols="3"></a>
</div>

<br/>

<div class="layout-grid">
  <a href="#" class="block" data-rows="2" data-cols="2"></a>
  <a href="#" class="block" data-rows="1" data-cols="1"></a>
  <a href="#" class="block" data-rows="1" data-cols="1"></a>
  <a href="#" class="block" data-rows="1" data-cols="1"></a>
  <a href="#" class="block" data-rows="1" data-cols="1"></a>
  <a href="#" class="block" data-rows="2" data-cols="1"></a>
  <a href="#" class="block" data-rows="1" data-cols="1"></a>
  <a href="#" class="block" data-rows="1" data-cols="1"></a>
</div>
...