Отзывчивая css сетка с пролетом - PullRequest
Новая
       9

Отзывчивая css сетка с пролетом

0 голосов
/ 27 марта 2020

Я пытаюсь создать адаптивную сетку css, в которой я устанавливаю несколько элементов div, чтобы занимать различное количество места, однако при изменении размера они должны выравниваться по одному на строку. Вот как он себя ведет, за исключением того, что те элементы, которые я установил для grid-column: span 2, оставляют пустое пространство справа от них. Вы можете увидеть поведение в фрагменте. В конечном итоге мне нужно, чтобы они были одинаковой длины на небольших пространствах, но я не хочу использовать медиа-запросы. Возможно ли это с сеткой CSS? 

* {
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  box-sizing: border-box;
  font-family: Ubuntu, Helvetica, Verdana, Arial, sans-serif;
}

html {
  background: linear-gradient(-10deg, #C62828, #BA68C8);
  min-height: 100vh;
  font-size: 22px;
}

body {
  padding: 50px;
}

code {
  margin: 1px 5px;
  padding: 2px 5px 1px 5px;
  font-family: monospace;
  border-radius: 2px;
  border: 1px dotted #fff;
}

p {
  margin: 25px 10px;
}

h2 {
  text-align: center;
  margin-top: 50px;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.outlined {
  height: 200px;
  border: 1px solid #fff;
  margin-bottom: 50px;
}

.grid > * {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.15);
  border: 1px solid #fff;
  border-radius: 2px;
  padding: 20px;
  /*margin: 10px;*/
  text-align: center;
}

.grid a {
    display: block;
}

.grid > a:hover {
  background-color: rgba(255, 255, 255, 0.25);
  text-decoration: none;
  transition: background-color ease 0.5s;
}


.grid {
    display: grid;
    /* grid-template-rows:100px 200px;
    grid-template-columns: 200px auto 150px; */
    grid-template-columns:  repeat(auto-fill, minmax(300px, 1fr));
   
    grid-gap: 10px;
    border: 1px solid #fff;

}

.grid :nth-child(1) {
    grid-column: span 2;
}

.grid :nth-child(2) {
    grid-column: span 3;
}

.grid :nth-child(3) {
    grid-column: span 2;
}

.grid :nth-child(4) {
    grid-column: span 3;
}
<html>
  <head>
      <link rel="stylesheet" href="css/base.css">
      <link rel="stylesheet" href="css/main.css">
      <!-- Remove this line for offline development: -->
  </head>
  <body>
    <div class="grid">
    <div>Grid item 1</div>
    <div>Grid item 2</div>
    <div>Grid item 3</div>
    <div>Grid item 4</div>
    </div>
  </body>
</html>

1 Ответ

0 голосов
/ 27 марта 2020

Вы можете попробовать flexbox для этого: 

* {
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  box-sizing: border-box;
  font-family: Ubuntu, Helvetica, Verdana, Arial, sans-serif;
}

html {
  background: linear-gradient(-10deg, #C62828, #BA68C8);
  min-height: 100vh;
  font-size: 22px;
}

body {
  padding: 50px;
}


.grid {
  display: flex;
  flex-wrap:wrap;
  border: 1px solid #fff;
}

.grid>* {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.15);
  border: 1px solid #fff;
  border-radius: 2px;
  padding: 20px;
  margin: 5px;
  flex-basis:0;
  flex-grow:2;
  min-width:300px;
  text-align: center;
}

/* to keep only two per line*/
.grid:before {
 content:"";
 flex-basis:100%;
}
/**/

/* make the first two before the pseudo element*/
.grid *:nth-child(-n + 2) {
  order:-1;
}
/* */

/* 2 and 4 will grow more */
.grid *:nth-child(even) {
  flex-grow:3
}
<div class="grid">
  <div>Grid item 1</div>
  <div>Grid item 2</div>
  <div>Grid item 3</div>
  <div>Grid item 4</div>
</div>
...