使用CSS网格创建棋盘

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

我必须用html和css创建棋盘（使用网格）。我创建了木板以及顶部和底部。现在我停留在中间部分。我创建了每个字段的大小（80像素* 80像素）。我的问题是，各个“字段”类在网格的底部溢出（“棋盘”）。如何解决所有div“字段”都留在创建的网格中的问题？ 

<body>
    <main class = "chess-board">
        <section class = "upper-numbers">
            <div class = "numbers">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </div>
        </section>

       <section class = "main-field">

        <div class = "field">a</div>
        <div class = "field">b</div>
        <div class = "field">c</div>
        <div class = "field">d</div>
        <div class = "field">e</div>
        <div class = "field">f</div>
        <div class = "field">g</div>
        <div class = "field">h</div>


        <div class = "field">i</div>
        <div class = "field">j</div>
        <div class = "field"></div>
        <div class = "field"></div>
        <div class = "field"></div>
        <div class = "field"></div>
        <div class = "field"></div>
        <div class = "field"></div>

        <div class = "field">q</div>
        <div class = "field">r</div>
        <div class = "field">s</div>
        <div class = "field"></div>
        <div class = "field"></div>
        <div class = "field"></div>
        <div class = "field"></div>
        <div class = "field"></div>

        <div class = "field"></div>
        <div class = "field"></div>
        <div class = "field"></div>
        <div class = "field"></div>
        <div class = "field"></div>
        <div class = "field"></div>
        <div class = "field"></div>
        <div class = "field"></div>

        <div class = "field"></div>
        <div class = "field"></div>
        <div class = "field"></div>
        <div class = "field"></div>
        <div class = "field"></div>
        <div class = "field"></div>
        <div class = "field"></div>
        <div class = "field"></div>

        <div class = "field"></div>
        <div class = "field"></div>
        <div class = "field"></div>
        <div class = "field"></div>
        <div class = "field"></div>
        <div class = "field"></div>
        <div class = "field"></div>
        <div class = "field"></div>

        <div class = "field"></div>
        <div class = "field"></div>
        <div class = "field"></div>
        <div class = "field"></div>
        <div class = "field"></div>
        <div class = "field"></div>
        <div class = "field"></div>
        <div class = "field"></div>

        <div class = "field"></div>
        <div class = "field"></div>
        <div class = "field"></div>
        <div class = "field"></div>
        <div class = "field"></div>
        <div class = "field"></div>
        <div class = "field"></div>
        <div class = "field"></div>
    </section>

        <section class = "lower-numbers">
            <div class = "numbers">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
                <div>7</div>
                <div>8</div>
                 </div>
        </section>
    </main>
</body>

这是CSS代码

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
}

  html 
  body{
    box-sizing: border-box;
    margin: 5%; 
    background-color: lightgreen;
    display: flex;
    justify-content: center; 
}

    .chess-board {
    width: 640px; 
    height: 720px; 
    background-color: white;  
    display: grid;
    grid-template-columns: repeat(8,80px);
    grid-template-rows: 40px repeat(8,80px) 40px;
    grid-gap: 0;
}

.upper-numbers {
    display: grid;
    grid-column: 1/9 ;
    grid-row: 1/1;
    grid-auto-flow: column;
    background-color: moccasin;
}
.lower-numbers {
    display: grid;
    grid-column: 1/9 ;
    grid-row: 10/10;
    grid-auto-flow: column;
    background-color: moccasin;
}
.numbers{
    display:grid; 
    grid-auto-flow: column;
    text-align: center;
    align-self: center;
}


/*.main-field {
    display: grid;
    grid-column: 1/9;
    grid-row: 2/10;
    background-color: white ;
}*/

.field {
    height: 80px; 
    width: 80px; 
}

.field:nth-child(-2n+8){
background-color: black;
}
html css grid
1个回答
0
投票

您遇到的主要问题是，网格属性不会继承到容器的子级之外。您正在尝试将网格属性应用于曾孙子女，这不起作用。

在您的代码中，您在网格容器上指定了此规则：

.chess-board {
    display: grid;
    grid-template-columns: repeat(8,80px);
    grid-template-rows: 40px repeat(8,80px) 40px;
 }

但这是您的HTML：

<main class="chess-board">

   <section class="upper-numbers">
     <div class="numbers">
       <div>1</div>
       ...
     </div>
   </section>

   <section class="main-field">
     <div class="field">a</div>
     ...
   </section>

   <section class="lower-numbers">
     <div class="numbers">
       <div>1</div>
       ...
     </div>
   </section>

</main>

[您的.chess-board网格命令只能应用于容器的子项，它们是“网格项”，并且仅包括.upper-numbers，.main-field和.lower-numbers。

嵌套在网格项内的所有元素均不参与网格布局。它们是标准块布局元素。

因此，如果您希望所有内容都存在于单个网格中，那么我的建议是“展平” HTML结构。

这是我使用网格和弹性布局的组合构造的一个简单示例。

.chess-board {
  margin: auto;
  width: 640px;
  height: 720px;
  background-color: white;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 40px 1fr 40px;
  grid-gap: 0;
}

.upper-numbers,
.lower-numbers {
  display: flex;
  background-color: moccasin;
}

.upper-numbers>div,
.lower-numbers>div {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-field {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 640px;
}

.field {
  height: 80px;
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.field:nth-child(-2n+8) {
  background-color: black;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 5%;
  background-color: lightgreen;
}
<main class="chess-board">

  <section class="upper-numbers">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </section>

  <section class="main-field">
    <div class="field">a</div>
    <div class="field">b</div>
    <div class="field">c</div>
    <div class="field">d</div>
    <div class="field">e</div>
    <div class="field">f</div>
    <div class="field">g</div>
    <div class="field">h</div>
    <div class="field">i</div>
    <div class="field">j</div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field">q</div>
    <div class="field">r</div>
    <div class="field">s</div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
    <div class="field"></div>
  </section>

  <section class="lower-numbers">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </section>

</main>

更多详细信息：

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