Question

我有一些div连续的网格系统。当屏幕太小而无法显示时，它们应该在一个新行中断开。我怎样才能做到这一点？

＆＃13;

.parent {
  width: 100%;
  height: 800px;
  display: grid;
  grid-auto-flow: column;
  background-color: blue;
  grid-column-gap: 10px;
}

.item {
  width: 200px;
  height: 30px;
  background-color: green;
  border: 1px solid yellow;
}

＆＃13;

<div class="parent">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

＆＃13;

更新它应该根据屏幕大小而中断。因此，当屏幕宽度仅为250px时，单个块应该连续。

Answer 1

试试这个

.parent {
  width: 100%;
  height: 800px;
  background-color: blue;
}

.item {
  width: 200px;
  height: 30px;
  background-color: green;
  border: 1px solid yellow;
  float: left;
}

<div class="parent">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer 2

Demo

试试这个：

.parent {
  width: 100%;
  height: 800px;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto;
  grid-gap: 10px;
  background-color: blue;
  padding: 10px; 

}

当它会溢出HTML中的父级时，如何在2行中打破div？

2 个答案: