Адаптивная сетка CSS без медиазапроса - PullRequest
Новая
       18

Адаптивная сетка CSS без медиазапроса

0 голосов
/ 25 августа 2018 

body {
  padding: 20px;
  font-family: Helvetica;
  background-color: #20262e;
}

ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(300px, 1fr));
  grid-template-rows: max-content 1fr;
  grid-gap: 10px;
  list-style: none;
}

li {
  background-color: #fff;
  border-radius: 3px;
  padding: 20px;
  font-size: 14px;
}

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

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

.c {
  grid-column: 2/3;
  grid-row: 2/3;
}

.d {
  grid-column: 3/4;
  grid-row: 1/3;
}
<ul>
  <li class=a>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br></li>
  <li class=b>B</li>
  <li class=c>C</li>
  <li class=d>D</li>
</ul>

Я бы хотел, чтобы сетка сворачивалась в один столбец, а элементы списка занимают 100% ширины, когда они достигают 300 пикселей.

Возможно ли это без необходимости выполнения медиазапроса, например: 

@media only screen and (max-width: 900px) {
    ul {
        display: block;
    }
}

Ответы [ 2 ]

0 голосов
/ 25 августа 2018

Мне пришлось изменить ваш HTML, и вам это может не понравиться: 

body {
  padding: 20px;
  font-family: Helvetica;
  background-color: #20262e;
}

ul {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax( 300px, auto ) );
  grid-template-rows: max-content 1fr;
  grid-gap: 10px;
  list-style: none;
}


li {
  background-color: #fff;
  border-radius: 3px;
  padding: 20px;
  font-size: 14px;
}


ul ul{
  height:100%;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:1fr 4fr;
}

.b{background:transparent;padding:0;}
.b ul{padding:0;margin:0; }
.b li{border:1px solid;}
<ul>
  <li class=a>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br></li>
  <li class="b">
    <ul>
     <li class="c">B</li>
     <li class="c">C</li>
    </ul>
  </li>
  <li class=d>D</li>
</ul>

Это важная часть: grid-template-columns: repeat( auto-fit, minmax( 300px, auto ) ); Я получил идею из этой статьи: Авторазмер столбцов в сетке CSS: auto-fill против auto-fit

0 голосов
/ 25 августа 2018

Как указано в комментариях, flexbox, вероятно, является лучшим выбором, если вы хотите избежать медиа-запросов. Ключ здесь должен объявить flex-wrap: wrap; на родителя. Вам придется реструктурировать свой html, чтобы разместить столбец, так как ul не может иметь детей, кроме li. 

body {
  padding: 20px;
  font-family: Helvetica;
  background-color: #20262e;
}

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}

li {
  display: flex;
  background-color: #fff;
  border-radius: 3px;
  margin: 10px;
  padding: 20px;
  width: 270px;
  font-size: 14px;
}

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

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

.c {
  grid-column: 2/3;
  grid-row: 2/3;
}

.d {
  grid-column: 3/4;
  grid-row: 1/3;
}
<ul>
  <li class=a>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br></li>
  <li class=b>B</li>
  <li class=c>C</li>
  <li class=d>D</li>
</ul>
...