я хочу разбивать строки в мобильной версии css grid - PullRequest
Новая
       43

я хочу разбивать строки в мобильной версии css grid

0 голосов
/ 28 марта 2019

Я хочу, чтобы эта сетка CSS реагировала на мобильную версию (разрывная строка, как эта -> фотография, а затем текст, текст фотографии и т. Д.) Что мне нужно написать в СМИ, чтобы сделать это? 

.grid-container {
  margin: 0 auto;
  width: 100%;
  top: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas: "area11 area11 area12 area12" "area11 area11 area12 area12" "area21 area21 area22 area22" "area21 area21 area22 area22" "area31 area31 area32 area32" "area31 area31 area32 area32";
}

a {
  text-decoration: none;
}

.area11 {
  grid-area: area11;
  padding: 100px;
}

.area12 {
  grid-area: area12;
  background-image: url('http://new.ephraims.de/wp-content/uploads/2019/03/extras.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.area21 {
  grid-area: area21;
  background-image: url('http://new.ephraims.de/wp-content/uploads/2019/03/services.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.area22 {
  grid-area: area22;
  padding: 100px;
}

.area31 {
  grid-area: area31;
  padding: 100px;
}

.area32 {
  grid-area: area32;
  background-image: url('http://new.ephraims.de/wp-content/uploads/2019/03/theysay.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


}

}
<div class="grid-container">
  <div class="area11">

    <p>
      B
    </p>

  </div><br class="mobile-break">
  <div class="area12">background Image</div>

  <div class="area21">background Image</div>


  <div class="area22">

    <p>A</p>
  </div>
  <div class="area31">
    <p>C</p>
  </div>
  <div class="area32">background Image</div>
</div>

я пробовал это: width: 100%, пробовал без сетки, но в любом случае это то же самое, пробовал table td, но в любом случае то же самое. это то, что я хочу, но не могу сделать это ответственным извините за мой английский

...