Question

我需要使用CSS网格创建一个布局，如下图所示，分辨率高于900px： -

对于低于900px的分辨率，我需要布局看起来像这样

所以，我试过这个： -

.container {
   display: grid;
   grid-template-columns: 250px auto 250px;
   grid-column-gap: 1rem;
 }

上面的代码创建了图像1，但我无法更改它以适应低于900px（image2）的布局更改。

如何在CSS网格中创建此布局，以便创建如上图所示的布局？

你可以在这里找到我的代码： jsfiddle

Answer 1

grid-template-areas应该更容易使用

＆＃13;

.item1 { grid-area: box1; }
.item2 { grid-area: box2; }
.item3 { grid-area: list; }
.item4 { grid-area: box3; }

.grid-container {
  display: grid;
  grid-template-areas:
    'box1 list box3'
    'box2 list box3';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

@media screen and (max-width: 900px) {
    .grid-container {
      grid-template-areas:
        'box1 list'
        'box2 list'
        'box3 list';
    }
}

＆＃13;

<div class="grid-container">
  <div class="item1">Box 1</div>
  <div class="item2">Box 2</div>
  <div class="item3">List</div>  
  <div class="item4">Box 3</div>
</div>

＆＃13;

Answer 2

我希望我们可以使用 grid-column-start ， grid-column-end ， grid-row-start 和 grid-row-end 以及媒体以获得所需的网格。

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}
.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
.box2{
  grid-column-start:1;
  grid-column-end:2;
}
.list1 {
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start:2;
  grid-column-end:3;
}
.box3{
 grid-column-start:3;
 grid-column-end:4;
 grid-row-start:1;
 grid-row-end:2;
}

@media (max-width:900px){
    .grid-container {
      grid-template-columns: auto auto;
    }
    .list1 {
    grid-row-start: 1;
    grid-row-end: 4;
    }
   .box3{
    grid-column-start:1;
    grid-column-end:2;
    grid-row-start:3;
    grid-row-end:4;
    }
 
}

<h1>Grid Lines</h1>

<div class="grid-container">
  <div class="box1">1</div>
  <div class="box2">2</div>
  <div class="list1">3</div>  
  <div class="box3">4</div>  
</div>

<p>You can refer to line numbers when placing grid items.</p>

Answer 3

希望 grid-auto-flow：列将有助于 mediaquery

Fiddle here

<div class="grid-container">
  <div class="item1">Box 1</div>
  <div class="item2">List</div>
  <div class="item3">Box 2</div> 
  <div class="item4">Box 3</div>
</div>


.grid-container {
  display: grid;
  grid-template-columns: 25% 50%;
  grid-gap: 10px;
  grid-auto-flow: column;

  > div {
    border: solid 1px #00f;
    padding: 10px;
  }
}

.item2 {
  grid-row-start: 1;
  grid-row-end:   3;
  grid-column: 2 / 3;
}


@media screen and (max-width: 900px) { 
  .grid-container { 
    grid-template-columns: 25% 1fr ;
  }

.item2 {
    grid-row-end: 4;  
  }
}

创建CSS网格布局

3 个答案: