代码之家 › 专栏 › 技术社区 › user21141188

如何在css网格中创建任意大小的矩阵

css-grid css

user21141188 · 技术社区 · 2 年前

我想使用CSS Grid创建一个任意的n x n矩阵。我的HTML结构是:

    <div class="matrix">
        <div class="matrix-corner"></div>
        <div class="matrix-header-row">Header1</div>
        <div class="matrix-header-row">Header2</div>
        <div class="matrix-header-col">Header1</div>
        <div class="matrix-header-col">Header2</div>
        <div class="matrix-row">      
            <div class="matrix-cell">100%</div>     
            <div class="matrix-cell">50%</div>     
        </div>
        <div class="matrix-row">
            <div class="matrix-cell">50%</div>
            <div class="matrix-cell">100%</div>
        </div>
    </div>

矩阵的大小最终将是任意的(即我无法固定网格CSS中的列数)。

我可以使用以下命令轻松地将行标题和列标题放在各自的位置 grid-row: 1/2 和 grid-column: 1/2 然而,我很难固定矩阵行元素,使它们堆叠在一起;当我使用 grid-column: 2/-1 Chrome忽略-1(因为它与显式网格列无关?)。

以下是我的完整CSS:

    .matrix {        
        display: grid;
        grid-auto-flow: dense;        
    }

    .matrix-corner {
        grid-row: 1/2;
        grid-column: 1/2;
    }

    .matrix-header-row {
        grid-row: 1/2;
        
    }

    .matrix-header-col {
        grid-column: 1/2;
    }

    .matrix-row {
        grid-column: 2 / -1;
        display: grid;
        grid-template-columns: subgrid;
        border: 1px solid red;
    }

What I want

What I've got

2 回复 | 直到 2 年前

Paulie_D 2 年前

A. table 这可能是合适的元素,但您选择了CSS Grid。

因此,将“行标题”和行内容包装在一起是合适的。

同样,将列标题包装在自己的行中也是有意义的。

然后我们可以利用 auto-fit (或 auto-fill )以及 subgrid .

然后,我们只需要指定行的开始和结束位置。

这使我们能够处理隔板

.matrix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  grid-auto-flow: row;
  gap: .25em;
  margin-bottom: 1em;
}

.matrix-column {
  display: grid;
  grid-template-columns: subgrid;
  grid-column-start: 2;
  grid-column-end: -1;
}

.matrix-row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column-start: 1;
  grid-column-end: -1;
}

.matrix-header-col,
.matrix-header-row,
.matrix-cell {
  border: 1px solid grey;
}

<div class="matrix">

  <div class="matrix-column">
    <div class="matrix-header-col">Column 1</div>
    <div class="matrix-header-col">Column 2</div>
  </div>
  <div class="matrix-row">
    <div class="matrix-header-row">Row 1</div>
    <div class="matrix-cell">100%</div>
    <div class="matrix-cell">50%</div>
  </div>
  <div class="matrix-row">
    <div class="matrix-header-row">Row 2</div>
    <div class="matrix-cell">50%</div>
    <div class="matrix-cell">100%</div>
  </div>
</div>

<div class="matrix">

  <div class="matrix-column">
    <div class="matrix-header-col">Column 1</div>
    <div class="matrix-header-col">Column 2</div>
    <div class="matrix-header-col">Column 3</div>
  </div>
  <div class="matrix-row">
    <div class="matrix-header-row">Row 1</div>
    <div class="matrix-cell">100%</div>
    <div class="matrix-cell">50%</div>
    <div class="matrix-cell">75%</div>
  </div>
  <div class="matrix-row">
    <div class="matrix-header-row">Row 2</div>
    <div class="matrix-cell">50%</div>
    <div class="matrix-cell">100%</div>
    <div class="matrix-cell">75%</div>
  </div>
  <div class="matrix-row">
    <div class="matrix-header-row">Row 3</div>
    <div class="matrix-cell">75%</div>
    <div class="matrix-cell">75%</div>
    <div class="matrix-cell">75%</div>
  </div>
</div>

-1

Tushar Jadav 2 年前

需要将每一行包裹起来 matrix-row 容器,但每个 matrix-cell 必须直接放置在网格内,以确保正确对齐。

.matrix {
    display: grid;
    grid-template-columns: auto repeat(2, 1fr); /* Adjust the number of columns as needed */
    grid-template-rows: auto repeat(2, auto);  /* Adjust the number of rows as needed */
    gap: 10px;
}

.matrix-corner {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
}

.matrix-header-row:nth-child(2) {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
}

.matrix-header-row:nth-child(3) {
    grid-row: 1 / 2;
    grid-column: 3 / 4;
}

.matrix-header-col:nth-child(4) {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

.matrix-header-col:nth-child(5) {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

.matrix-cell:nth-child(6) {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.matrix-cell:nth-child(7) {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}

.matrix-cell:nth-child(8) {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
}

.matrix-cell:nth-child(9) {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
}

.matrix-cell {
    border: 1px solid red;
    padding: 10px;
    text-align: center;
}

<div class="matrix">
    <div class="matrix-corner"></div>
    <div class="matrix-header-row">Header1</div>
    <div class="matrix-header-row">Header2</div>
    <div class="matrix-header-col">Header1</div>
    <div class="matrix-header-col">Header2</div>
    
    <div class="matrix-cell">100%</div>     
    <div class="matrix-cell">50%</div>
    <div class="matrix-cell">50%</div>
    <div class="matrix-cell">100%</div>
</div>