CSS Grid Layout и nth-child - PullRequest
Новая
       33

CSS Grid Layout и nth-child

0 голосов
/ 17 января 2019

Я собираюсь создать макет с динамическим количеством изображений, все через css-grid, но у меня есть проблема, я хотел бы, чтобы первые 10 изображений были креативно оформлены, а более поздние, которые я хотел бы иметь их заказали в сетке.

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

Пожалуйста, помогите мне, заранее спасибо

Вероятно, ошибка здесь 

#container .mix:nth-child(n+11){
 grid-column-start: 1;
 grid-row-start: 43;
 grid-column: span 4;
 grid-row: span 2;
}

контрольное изображение 

#container {
  display: grid;
  grid-template-columns:repeat(15, 1fr);
  grid-template-rows: repeat(20, 1fr);
  }

  #container .mix:nth-child(1){
    grid-column: 7 / span 9;
    grid-row: 1 / span 8;
  }

  #container .mix:nth-child(2){
    grid-column: 1 / span 9;
    grid-row: 4 / span 8;
  }

  #container .mix:nth-child(3){
    grid-column: 9 / span 7;
    grid-row: 8 / span 4;
  }

  #container .mix:nth-child(4){
    grid-column: 1 / span 9;
    grid-row: 11 / span 8;
  }

  #container .mix:nth-child(5){
    grid-column: 7 / span 9;
    grid-row: 17 / span 8;
  }

  #container .mix:nth-child(6){
    grid-column: 1 / span 5;
    grid-row: 22 / span 8;
  }
  #container .mix:nth-child(7){
    grid-column: 5 / span 7;
    grid-row: 25 / span 8;
  }
  #container .mix:nth-child(8){
    grid-column: 10 / span 6;
    grid-row: 23 / span 8;
  }

  #container .mix:nth-child(9){
    grid-column: 1 / span 8;
    grid-row: 31 / span 8;
  }
  #container .mix:nth-child(10){
    grid-column: 8 / span 8;
    grid-row: 34 / span 8;
  }

  #container .mix:nth-child(n+11){
    grid-column-start: 1;
    grid-row-start: 43;
    grid-column: span 4;
    grid-row: span 2;
  }
<div id="container">
    <div class="mix">
      <img src="https://via.placeholder.com/480x240">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/480x240">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
   <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
   <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
    
    <!-- end top 10 images -->
    
    <div class="mix">
      <img src="https://via.placeholder.com/400x240/ff0000">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/400x240/ff0000">
    </div>
     <div class="mix">
      <img src="https://via.placeholder.com/400x240/ff0000">
    </div>
     <div class="mix">
      <img src="https://via.placeholder.com/400x240/ff0000">
    </div>
    
    
</div><!-- end container -->

Ответы [ 2 ]

0 голосов
/ 18 января 2019

Я согласен с Михаэлем Вандерхейденом: я провел несколько тестов сетки и думаю так же, как деление на новую сетку, где вы упорядоченно размещаете новые элементы, как вы помещаете их в изображение, более выполнимо В качестве рекомендации я знаю, что цель состоит в том, чтобы использовать display: grid, но вы можете использовать новые возможности и более широкие возможности, если вы используете CSS-фреймворк, я знаю, что кто-то уже предложил это, но вы могли бы стандартизировать поведение вашей сетки и даже доступ к большему количеству вариантов поведения внутренних элементов с использованием framworks (HTML-css-JS), я не знаю обстоятельств требования, но я думаю, что рекомендация верна, удачи

0 голосов
/ 18 января 2019

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

Так как в первой части статическое количество детей. Было бы лучше разделить это на 2 контейнера: один для первых изображений и один для остальных. Проверьте код ниже. Хотя ширина выше была довольно динамичной, в то время как изображения имеют статические размеры. Так что, если вы не сделаете размер изображения динамическим или ширину контейнера статической. Вы не получите 3 предмета на ряд во втором контейнере 

.creative {
  display: grid;
  grid-template-columns:repeat(15, 1fr);
  grid-template-rows: repeat(20, 1fr);
  }
	
	.ordered {
  display: flex;
	flex-wrap: wrap;
  }

  .creative .mix:nth-child(1){
    grid-column: 1 / span 9;
    grid-row: 1 / span 8;
  }

  .creative .mix:nth-child(2){
    grid-column: 1 / span 9;
    grid-row: 4 / span 8;
  }

  .creative .mix:nth-child(3){
    grid-column: 9 / span 7;
    grid-row: 8 / span 4;
  }

  #container .mix:nth-child(4){
    grid-column: 1 / span 9;
    grid-row: 11 / span 8;
  }

  .creative .mix:nth-child(5){
    grid-column: 7 / span 9;
    grid-row: 17 / span 8;
  }

  .creative .mix:nth-child(6){
    grid-column: 1 / span 5;
    grid-row: 22 / span 8;
  }
  .creative .mix:nth-child(7){
    grid-column: 5 / span 7;
    grid-row: 25 / span 8;
  }
  .creative .mix:nth-child(8){
    grid-column: 10 / span 6;
    grid-row: 23 / span 8;
  }

  .creative .mix:nth-child(9){
    grid-column: 1 / span 8;
    grid-row: 31 / span 8;
  }
  .creative .mix:nth-child(10){
    grid-column: 8 / span 8;
    grid-row: 34 / span 8;
  }
<div class="container creative">
    <div class="mix">
      <img src="https://via.placeholder.com/480x240">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/480x240">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
   <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
   <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/400x240">
    </div>
</div>
   
    <!-- end top 10 images -->
<div class="container ordered">  
    <div class="mix">
      <img src="https://via.placeholder.com/400x240/ff0000">
    </div>
    <div class="mix">
      <img src="https://via.placeholder.com/400x240/ff0000">
    </div>
     <div class="mix">
      <img src="https://via.placeholder.com/400x240/ff0000">
    </div>
     <div class="mix">
      <img src="https://via.placeholder.com/400x240/ff0000">
    </div>
    
    
</div><!-- end container -->
...