CSS Grid отдых - PullRequest
Новая
       13

CSS Grid отдых

0 голосов
/ 31 января 2019

Я пытаюсь воссоздать эту сетку, используя CSS Grid, используя только таблицу и диапазон строк / столбцов, а также ячейку: nth-child, но я просто не могу понять это.Я просто застрял на этом.Я тоже пытался использовать flexbox, но все еще не могу заставить его работать. Кто-нибудь может помочь?вот сетка: GRID

.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>

Ответы [ 3 ]

0 голосов
/ 31 января 2019

Если сетка остается прежней, вы можете попробовать это: 

.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>

Используется свойство grid-area для присвоения элементов сетке.

0 голосов
/ 31 января 2019

Я не уверен, требуется ли использовать диапазон строк / столбцов, но это то, что я придумал? 

<!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>
0 голосов
/ 31 января 2019

Вы можете попробовать, как показано ниже: 

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>
...