Блог

Главная - Вопросы по программированию - Как мне отобразить сетку «2xN» с рабочего стола «1×2 * N» на мобильном устройстве?

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

#css #css-grid

#css #css-grid

Вопрос:

Я хочу сделать макет следующим образом

На ПК:

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 и изменить порядок DIVS в HTML, но мне нужно указать grid-template-rows, чтобы это работало. И я не знаю, сколько строк это будет, поэтому не знаю, сколько там установлено 1fr.

Ответ №1:

Вы можете настроить порядок только вторых элементов столбца, используя 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>

Комментарии:

1. Спасибо! Но это было бы довольно просто, если бы работало что-то подобное: grid-auto-flow: column; grid-template-columns: 1fr;

2. И установите html следующим образом: <div class="grid"> <div>List 1</div> <div>Position 1. List 1</div> <div>Position 2. List 1</div> <div>Position 3. List 1</div> <div>List 2</div> <div>Position 1. List 2</div> <div>Position 2. List 2</div> <div>Position 3. List 2</div> </div>

3. И пусть сетка устанавливает их как в grid-auto-flow: row режиме, но сверху вниз здесь разделяется на 2 столбца. Есть ли какие-то подобные возможности?

4. @user3055346 итак, в основном вы хотели бы сохранить структуру HTML с «all list1», а затем «all list2»?

5. @user3055346 нет, я так не думаю, у grid нет возможности сделать это… но вы, вероятно, можете посмотреть на столбец ( developer.mozilla.org/en-US/docs/Web/CSS/columns ) она должна идеально подходить для вашего варианта использования