将一系列div转换为4x4网格 [英] Transform a sequence of divs into a 4x4 grid

问题描述

我有一个用 * ngFor 创建的div序列，我想使它们作为4x4的div网格可见.这是模板(HTML)和 CSS :

I have a sequence of divs, created with *ngFor and I want to make them visible as a 4x4 grid of divs. Here are the template (HTML) and CSS :

模板(HTML)片段:

Template (HTML) fragment :

<div class="game-container">
  <div class="grid-container" *ngFor="let item of itemArray">
    <div class="grid-cell-{{item|number}}">
      <span>{{item}}</span>
    </div>
  </div>
  <button (click)="Right(itemArray)">Right</button>
  <button (click)="Left(itemArray)">Left</button>
</div>

CSS片段:

.game-containter {
    background: F4A460;
    grid-template-columns: repeat(106.25px, 1fr);
    grid-gap: 15px;
    grid-auto-rows: 470;
}

div {
    display: inline-block;
}

.grid-cell {
    width: 106.25px;
    height: 106.25px;
    margin-right: 15px;
    margin-bottom: 15px;
    float: left;
    border-radius: 3px;
    background: #acaaaa;
    text-align: right, bottom;
}

使用这些行，将div显示在一行中，应如何修改这些分辨率才能将div呈现为4x4网格?有16个div.

Using these lines, the divs are shown in a line, how these should be modified for presenting the divs into a 4x4 grid? There are 16 divs.

推荐答案

您需要在容器(在本例中为 .grid-container )上声明 display:grid .

You need to declare display: grid on the container, in this case .grid-container.

您可以使用 grid-template-columns:repeat(4，106.25px);

这将创建4列，每列的宽度为106.25px.

This will create 4 columns, each of width 106.25px.

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 106.25px);
  grid-gap: 15px;
}

.grid-cell {
  height: 106.25px;
  border-radius: 3px;
  background: #acaaaa;
  text-align: right, bottom;
}

<div class="game-container">
  <div class="grid-container">
    <div class="grid-cell">
      <span></span>
    </div>
    <div class="grid-cell">
      <span></span>
    </div>
    <div class="grid-cell">
      <span></span>
    </div>
    <div class="grid-cell">
      <span></span>
    </div>
    <div class="grid-cell">
      <span></span>
    </div>
    <div class="grid-cell">
      <span></span>
    </div>
    <div class="grid-cell">
      <span></span>
    </div>
    <div class="grid-cell">
      <span></span>
    </div>
    <div class="grid-cell">
      <span></span>
    </div>
    <div class="grid-cell">
      <span></span>
    </div>
    <div class="grid-cell">
      <span></span>
    </div>
    <div class="grid-cell">
      <span></span>
    </div>
    <div class="grid-cell">
      <span></span>
    </div>
    <div class="grid-cell">
      <span></span>
    </div>
    <div class="grid-cell">
      <span></span>
    </div>
    <div class="grid-cell">
      <span></span>
    </div>
  </div>
</div>

这篇关于将一系列div转换为4x4网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！