Как отобразить сетку «2xN» с рабочего стола «1x2 * N» на мобильном телефоне? - PullRequest
Новая
       2

Как отобразить сетку «2xN» с рабочего стола «1x2 * N» на мобильном телефоне?

4 голосов
/ 04 апреля 2019

Я хочу сделать макет вот так

На ПК:

List 1 |List2 L1.Item1|L2.Item1 L1.Item2|L2.Item2 L1.ItemN|L2.ItemN.

Показать на мобильном телефоне, как это:

List 1 L1.Item1 L1.Item2 L1.ItemN List2 L2.Item1 L2.Item2 L2.ItemN

html, body {
  height: 100%;
}

* {
  margin: 0;
  padding: 0;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 50px repeat(auto-fit, auto);
  background-color: #1aaa00;
  height: 100%;
  text-align: center;
}

.grid > * {
  outline: 1px dashed #666;
}

.head {
  grid-area: 1 / 1 / 3 / 3;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="grid">
    <div class="head">Header</div>
    <div>List 1</div>
    <div>List 2</div>
    <div>Position 1. List 1 <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa aliquam ipsa alias molestias accusamus enim veritatis! Pariatur fugiat maiores fuga sed nisi itaque quisquam, recusandae, accusamus cumque. Facilis, ipsum, vitae?</div>
    <div>Position 1. List 2</div>
    <div>Position 2. List 1</div>
    <div>Position 2. List 2 <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, dolorum!</div>
    <div>Position 3. List 1</div>
    <div>Position 3. List 2</div>
  </div>
</body>
</html>

Каждый предмет должен находиться напротив того же предмета в соседнем списке. Количество строк не фиксировано, но одинаково в обоих списках. Высота рядов также может быть разной. Это зависит от содержания.

Как я могу сначала показать на мобильном списке 1, а под ним список 2?

Я пробовал grid-auto-flow: column и переупорядочивать DIV в HTML, но мне нужно указать grid-template-row, чтобы он работал. И я не знаю, сколько будет строк, поэтому не знаю, сколько там будет 1fr.

1 Ответ

1 голос
/ 04 апреля 2019

Вы можете настроить порядок только вторых элементов столбца с помощью nth-child(), а затем просто сделать макет одним столбцом на мобильном телефоне: 

/*html,
body {
  height: 100%;
} no more needed with 100vh*/

* {
  margin: 0;
  padding: 0;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: #1aaa00;
  min-height: 100vh; /*better use min-height*/
  text-align: center;
}

.grid>* {
  outline: 1px dashed #666;
}

.head {
  grid-column: 1 / -1; /*use -1 to avoid creating a extra column on mobile*/
  min-height: 50px;
}

@media all and (max-width:800px) {
  .grid {
    grid-template-columns: 1fr; /*one column*/
  }
  .grid> :nth-child(2n+1) {
    order: 2; /*all the list2 at the bottom*/
  }
  .grid>div.head {
    order: -1; /*the head should stay on the top*/
  }
}
<div class="grid">
  <div class="head">Header</div>
  <div>List 1</div>
  <div>List 2</div>
  <div>Position 1. List 1 <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa aliquam ipsa alias molestias accusamus enim veritatis! Pariatur fugiat maiores fuga sed nisi itaque quisquam, recusandae, accusamus cumque. Facilis, ipsum, vitae?</div>
  <div>Position 1. List 2</div>
  <div>Position 2. List 1</div>
  <div>Position 2. List 2 <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, dolorum!</div>
  <div>Position 3. List 1</div>
  <div>Position 3. List 2</div>
</div>

Если вы хотите иметь хороший порядок в своем HTML-коде, вы можете попробовать это: 

/*html,
body {
  height: 100%;
} no more needed with 100vh*/

* {
  margin: 0;
  padding: 0;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: #1aaa00;
  grid-auto-flow:dense; /*to fill all the space*/
  min-height: 100vh; /*better use min-height*/
  text-align: center;
}

.grid>* {
  outline: 1px dashed #666;
  grid-column:1; /*list one column 1*/
}


.l2,
.l2 ~ * {
  grid-column:2; /*list two column 2*/
}


.head {
  grid-column: 1 / -1; /*use -1 to avoid creating a extra column on mobile*/
  min-height: 50px;
}

@media all and (max-width:800px) {
  .grid {
    grid-template-columns: 1fr; /*one column*/
  }
  .l2,
  .l2 ~ * {
    grid-column:1; /*list two column 1*/
  }
}
<div class="grid">
  <div class="head">Header</div>
  <div>List 1</div>
  <div>Position 1. List 1 <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa aliquam ipsa alias molestias accusamus enim veritatis! Pariatur fugiat maiores fuga sed nisi itaque quisquam, recusandae, accusamus cumque. Facilis, ipsum, vitae?</div>
  <div>Position 1. List 1</div>
  <div>Position 3. List 1</div>
  <div class="l2">List 2</div>
  <div>Position 1. List 2</div>
  <div>Position 2. List 2 <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, dolorum!</div>
  <div>Position 3. List 2</div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...