html - 使用 CSS Grid 创建棋盘

标签 html css css-grid

我必须使用 htmlcss(使用 grid)创建一个棋盘。我创建了电路板以及顶部和底部。现在我卡在中间部分了。我创建了每个字段的大小 (80px x 80px) 我的问题是单个 field 类在我的网格底部溢出 (棋盘)。我该如何解决所有 div“字段”都留在我创建的网格中的问题?

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

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;
}
<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>

最佳答案

您遇到的主要问题是网格属性不会继承到容器的子项之外。您正在尝试将网格属性应用于曾孙,但这是行不通的。

在您的代码中,您有创建网格容器的规则:

.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-数字是网格项,可以接受网格命令。

嵌套在网格项中的所有元素不参与网格布局。它们是标准的 block 布局元素。因此他们会忽略您的 grid-template-columnsgrid-template-rows 命令。

我的建议是,如果您想使用单个网格容器,并且在浏览器支持网格“子网格”功​​能之前,我的建议是“展平”HTML 结构。

这是我结合使用网格和 flex 布局构建的一个简单示例。

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

更多详情:

关于html - 使用 CSS Grid 创建棋盘,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60126276/

相关文章:

css - 为什么 minmax(0, 1fr) 对长元素有效而 1fr 却不行?

html - 在 css-grid 中使用对齐项时使单元格内容填充整个单元格区域

html - 定位固定 header

javascript - 一些网站要求您下载他们的 AppStore 应用程序 - 我该如何为我的网站执行此操作?

html - 在 td 中使用 div 固定表格行高

php - 我定义了 15 个类,名称为 box1、box2、box3、...box15。如何在没有逗号分隔的情况下定义类?

python - 使用 Google App Engine 在 HTML 和 CSS 上呈现模板

html - 为什么固定元素不拉伸(stretch)到网格区域的整个宽度?

html - 如何垂直对齐 div 以使背景完美匹配且文本位于中心?

php - 通过 PHP 更新数据库