Question

我试图使用CSS Grid仅使用一个表和行跨度/列跨度以及cell：nth-child来重新创建此网格，但是我似乎无法弄清楚。我只是真的停留在这一个。我也尝试过使用flexbox，但是仍然无法使用它，有人可以提供帮助吗？这是网格：

.table {
    margin: auto; 
    margin-top: 40px;
    display: grid;
    width: 50%;
    grid-template-columns: 1fr 2fr 1fr;
    grid-column-gap: 1px;
    grid-row-gap: 1px;
}

.cell {
    border: 1px  solid;
    border-color:#000;
    margin: 10px; 
    height: 200px;
}

.cell img {
    object-fit: cover;
    width: 100%;
    height: 200px; 
}


.cell:nth-child(2){
    grid-column: span 2;
}

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>CSS Grid 2</title>
        <meta name="description" content="CSS Grid">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="cssgrid2.css">
    </head>
    <body>

        <div class="table">

            <div class="cell">
                <img src="img/forest.jpg">
            </div>

            <div class="cell">
                <img src="img/snow.jpg">
            </div>

            <div class="cell">
                    <img src="img/winter.jpg">
            </div>
    

            <div class="cell">
                <img src="img/eclipse.jpg">
            </div>

            <div class="cell"></div>

         <div class="cell">        
                <img src="img/moon.jpg">
            </div>

            <div class="cell">
                <img src="img/trees.jpg">
            </div>

            


        </div>

Answer 1

您可以尝试如下操作：

td {
  border: 1px solid;
  padding: 40px;
}

<table>
  <tr>
    <td>
    </td>
    <td rowspan="2" colspan="2">
    </td>
  </tr>
  <tr>
    <td>
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td style="width:100px">
    </td>
    <td rowspan="2">
    </td>
  </tr>
  <tr>
    <td colspan="2">
    </td>
  </tr>
</table>

Answer 2

我不确定是否需要使用行/列跨度，但这是我想到的？

<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: tree; }
.item2 { grid-area: building; }
.item3 { grid-area: leaf; }
.item4 { grid-area: diner; }
.item5 { grid-area: city; }
.item6 { grid-area: empty; }
.item7 { grid-area: bridge; }

.grid-container {
  display: grid;
  grid-template-areas:
    'tree leaf leaf leaf'
    'building leaf leaf leaf'
    'diner empty empty bridge'
    'city city city bridge';
  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;
}
</style>
</head>
<body>

<div class="grid-container">
  <div class="item1">Tree</div>
  <div class="item2">Building</div>
  <div class="item3">Leaf</div>  
  <div class="item4">Diner</div>
  <div class="item5">City</div>
  <div class="item6">Empty</div>
  <div class="item7">Bridge</div>
</div>

</body>
</html>

Answer 3

如果网格保持不变，则可以尝试以下操作：

stub()

.table {
  display: grid;
  grid-gap: 5px;
  grid-template-areas: "a b b b" "c b b b" "d e e f" "g g g f";
}

.cell:nth-child(1) {
  grid-area: a;
  background: red;
}

.cell:nth-child(2) {
  grid-area: c;
  background: blue;
}

.cell:nth-child(3) {
  grid-area: b;
  background: yellow;
}

.cell:nth-child(4) {
  grid-area: d;
  background: teal;
}

.cell:nth-child(5) {
  grid-area: e;
  background: green;
}

.cell:nth-child(6) {
  grid-area: g;
  background: purple;
}

.cell:nth-child(7) {
  grid-area: f;
  background: black;
}

这使用<div class="table"> <div class="cell"> <img src="img/forest.jpg"> </div> <div class="cell"> <img src="img/snow.jpg"> </div> <div class="cell"> <img src="img/winter.jpg"> </div> <div class="cell"> <img src="img/eclipse.jpg"> </div> <div class="cell"></div> <div class="cell"> <img src="img/moon.jpg"> </div> <div class="cell"> <img src="img/trees.jpg"> </div> </div>属性将元素分配给网格。

CSS网格娱乐

3 个答案: