网格中的 div 未正确排列

问题描述 投票：0回答：1

该项目是使用网格重新创作蒙德里安的画作。我的意志不正确，有人可以告诉我我做错了什么吗？如果可能的话，你能解释一下为什么它们是 4 列和行，而不是 2 和 3 列。并且在查看图片时的定位我看到顺序为 R、W、W、W、Bl、W、Y、Bk、W，但是老师说的是R,W,W,W,B,W,W,Bk

这是我的代码

.grid-container{
      height: 748px;
      width: 748px;
      display: grid;
      background-color: black;
      grid-template-columns: 320px, 198px, 153px,50px;
      grid-template-rows: 414px, 130px, 155px, 20px;
      gap: 9px;
    }
    
    .child{
      background-color: #F0F1EC;
    }


    .red{
      background-color: #E72F24;
    }

    .white1{
      grid-column: span 3;
    } 

    .white2{
      grid-row: span 2;
    }
 
   .white3{
     grid-area: 2 / 2 / 4 / 4
    }

    .white4{
      grid-row: span 2;
    }

    .blue{
      background-color: #004592;
      border-bottom: 10px solid #000;
    }

    .yellow{
      background-color: #F9D01E;
   
    }

    .black{
      background-color: #232629;
   
    }



    

  </style>
</head>

<body>

  <div class="grid-container">
    <div class="red child"></div>
    <div class="white1 child"></div>
    <div class="white2 child"></div>
    <div class="white3 child"></div>

    <div class="blue child"></div>
    <div class="white4 child"></div>

    <div class="child"></div>
    <div class="yellow child"></div>
    <div class="black child"></div>
  </div>
</body>

这就是解决方案


.container {
      height: 748px;
      width: 748px;
      display: grid;
      background-color: #000;
      grid-template-columns: 320px 198px 153px 50px;
      grid-template-rows: 414px 130px 155px 22px;
      gap: 9px;
    }

    .item {
      background-color: #F0F1EC;
    }

    .red {
      background-color: #E72F24;
    }

    .white1 {
      grid-column: span 3;
    }

    .white2 {
      grid-row: span 2;
    }

    .white3 {
      grid-area: 2 / 2 / 4 /4
    }

    .blue {
      background-color: #004592;
      border-bottom: 10px solid #000;
    }

    .white4 {
      grid-row: span 2;
    }

    .yellow {
      background-color: #F9D01E;
    }

    .black {
      background-color: #232629;
    }
  </style>
</head>

<body>

 <div class="container">
    <div class="item red"></div>
    <div class="item white1"></div>
    <div class="item white2"></div>
    <div class="item white3"></div>

    <div class="item blue"></div>
    <div class="item white4"></div>

    <div class="item"></div>
    <div class="item yellow"></div>
    <div class="item black"></div>
  </div>
</body>

这是它们的样子

enter image description here

enter image description here

html css grid
1个回答
0
投票

首先，列和行分别由 

grid-template-columns
和 
grid-template-rows
确定。有 4 个数字，这就是为什么有 4 行/列，值是高度/宽度。

至于为什么看起来不一样，是因为 

grid-template-columns
和 
grid-template-rows
值里有逗号，应该只是空格。

<!DOCTYPE html>
<html>
<head>
  <style>
  .grid-container{
      height: 748px;
      width: 748px;
      display: grid;
      background-color: black;
      grid-template-columns: 320px 198px 153px 50px;
      grid-template-rows: 414px 130px 155px 20px;
      gap: 9px;
    }

    .child{
      background-color: #F0F1EC;
    }


    .red{
      background-color: #E72F24;
    }

    .white1{
      grid-column: span 3;
    } 

    .white2{
      grid-row: span 2;
    }

   .white3{
     grid-area: 2 / 2 / 4 / 4
    }

    .white4{
      grid-row: span 2;
    }

    .blue{
      background-color: #004592;
      border-bottom: 10px solid #000;
    }

    .yellow{
      background-color: #F9D01E;

    }

    .black{
      background-color: #232629;

    }
  </style>
</head>

<body>

  <div class="grid-container">
    <div class="red child"></div>
    <div class="white1 child"></div>
    <div class="white2 child"></div>
    <div class="white3 child"></div>

    <div class="blue child"></div>
    <div class="white4 child"></div>

    <div class="child"></div>
    <div class="yellow child"></div>
    <div class="black child"></div>
  </div>
</body>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.