CSS сетка и отзывчивый вид - PullRequest
Новая
       16

CSS сетка и отзывчивый вид

0 голосов
/ 21 февраля 2019

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

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

enter image description here

Но как мне контролировать это с помощью сетки CSS? 

.wrapper {
  display:grid;
  grid-template-columns:1fr 2fr 1fr;
  grid-auto-rows:minmax(100px,auto);
  grid-gap:1em;
}	

.wrapper > div {
  background-color: #eee;
  padding: 1em;
}
.wrapper > div:nth-child(odd) {
  background-color: #ddd;
}

.box1 {
  grid-column:1/3;
  grid-row:1/3;
}

.box2 {
  grid-column:3;
}

.box3 {
  grid-column:3;
}
<div class="wrapper">
  	<div class="box box1">Box 1</div>
    <div class="box box2">Box 2</div>
    <div class="box box3">Box 3</div>
</div>

Ответы [ 2 ]

0 голосов
/ 21 февраля 2019

Вы можете использовать медиазапросы с @media only screen and (max-width: 990px) -
. Вы можете использовать две колонки grid , используя grid-template-columns: 1fr 1fr для этого представления - см. Демонстрацию ниже: 

.wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 1em;
}

.wrapper>div {
  background-color: #eee;
  padding: 1em;
}

.wrapper>div:nth-child(odd) {
  background-color: #ddd;
}

.box1 {
  grid-column: 1/3;
  grid-row: 1/3;
}

.box2 {
  grid-column: 3;
}

.box3 {
  grid-column: 3;
}

@media only screen and (max-width: 990px) {
  .wrapper {
    grid-template-columns: 1fr 1fr;
  }
  .box1 {
    grid-column: span 2; /* span the first row */
    grid-row: 1; /* first row */
  }
  .box2 {
    grid-column: 1; /* first column */
  }
  .box3 {
    grid-column: 2; /* second column */
  }
}
<div class="wrapper">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
  <div class="box box3">Box 3</div>
</div>
0 голосов
/ 21 февраля 2019

Вы должны использовать @media, и вам нужно снова внести коррективы для 991px. 

.wrapper {
  display:grid;
  grid-template-columns:1fr 2fr 1fr;
  grid-auto-rows:minmax(100px,auto);
  grid-gap:1em;
}	

.wrapper > div {
  background-color: #eee;
  padding: 1em;
}
.wrapper > div:nth-child(odd) {
  background-color: #ddd;
}

.box1 {
  grid-column:1/3;
  grid-row:1/3;
}

.box2 {
  grid-column:3;
}

.box3 {
  grid-column:3;
}

@media screen and (max-width:991px){

  .wrapper {
    grid-template-columns:1fr 1fr;
  }	
  .box1 {
    grid-column:1/4;
    grid-row:1/3;
  }

  .box2 {
    grid-column:1/2;
  }

  .box3 {
    grid-column:2/4;
  }
  
}
<div class="wrapper">
  	<div class="box box1">Box 1</div>
    <div class="box box2">Box 2</div>
    <div class="box box3">Box 3</div>
</div>
...