Как отображать указанную c нет. строк в сетке css?

Question

Я использую CSS сетка для отображения 5 карт. Карты идеально выровнены в одном ряду на рабочем столе. Но когда я переключаюсь на мобильное устройство , они отображаются в соответствии с изображением ниже .

Можно ли указать отображать только две строки в сетке CSS .

Answer 1

Вы не можете указать только 2 строки , но вы можете попытаться установить для последних строк значение minmax(0,0) в стороне overflow:hidden; ..., чтобы скрыть их:

section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1em;
  overflow: hidden;
  grid-template-rows: minmax(100px, 1fr) minmax(100px, 1fr) minmax(0px, 0); /* third-row won't show, next might , grid-gap will increase height of section if set */
}

section {
  counter-reset: divs;
}

div {
  border: solid;
}

div:before {
  counter-increment: divs;
  content: counter(divs)
}
p:before {
color:red;
  content: counter(divs)
  }

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>
<p> boxes are standing here </p>

при этом скрывается третья строка, если больше, то появляется какой-то элемент, поскольку набор grid-gap будет увеличивать height для каждой дополнительной строки.

---

Вы можете использовать margin вместо grid-gap и добавлять для каждой дополнительной строки, чтобы скрыть значение mimax(0,0) для grid-template-rows.

Еще одна демонстрация ниже , показывающая один ряд (из 7) и 2 поля (из 14).

section {counter-reset:divs;}
div {border:solid;margin:0.5em;}
div:before {counter-increment:divs;content:counter(divs)}

section {
  display:grid;
  grid-template-columns:1fr 1fr;   
  overflow:hidden;
  grid-template-rows: 
    minmax(100px,1fr) /* row to be seen */
    minmax(0,0)
    minmax(0,0)
    minmax(0,0)  
    minmax(0,0) 
    minmax(0,0)  
    minmax(0,0)  ;/* 7 rows values set , 6 rows can be hidden */
}

p:before {
color:red;
  content: counter(divs)
  }

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div> 
</section>
<p> boxes are standing here.</p>

демо (скрыть / показать) так много строк

Answer 2

Просто скройте последний элемент на случай, если сетка обернется. Я сделал рабочий пример.

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
</div>

-

.wrapper {
  display: grid;
  grid-auto-flow: column;
}

.wrapper {
  display: grid;
  grid-auto-flow: column;
}

@media only screen and (max-width: 800px) {
  .wrapper {
      grid-auto-flow: row;
      grid-template-columns: repeat(2, minmax(300px, 500px));
  }
  .e{
    display: none;
  }
}

Скрипка: https://jsfiddle.net/k2zLqx1d/

Answer 3

Вы можете работать с css. Либо вы создаете класс mobile-display-none, который будет скрывать ваш контент с указанной c точкой останова. Или, если вы получаете эти данные из массива, вы можете изменить массив или указать код, к индексу которого должны быть представлены элементы. Однако для этого вам также понадобится точка останова, так что я бы просто go для прямого css @media экрана. Если вы хотите сделать 5-й дел в качестве третьего элемента в этой строке, вы можете настроить сетку.