正在寻找一种更好的方法来编写此 css 网格 (scss)

Question

我有以下网格：https://codesandbox.io/s/react-and-scss-forked-bwy6v?file=/src/index.js，我正在寻找一种 better/shorter 方法来编写此网格。我第一次使用网格。
这实际上是我正在构建的响应式网站的一小部分。

.addTransaction {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 50px;

  & div {
    border: solid 1px red;
  }

  & .buySell {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;

    display: grid;
    grid-template-columns: 0.5fr 0.5fr;
    column-gap: 5px;

    & .sell {
      width: 100%;
    }

    & .buy {
      width: 100%;
    }

  }

  & .token {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
  }


  & .quantity {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 3;
    grid-row-end: 4;
  }

  & .price {
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 4;
  }

  & .date {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 4;
    grid-row-end: 5;
  }

  & .exchange {
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 4;
    grid-row-end: 5;
  }

  & .totalSpent {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 5;
    grid-row-end: 6;
  }

  & .addToCalc {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 6;
    grid-row-end: 7;
  }

  & .submit {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 7;
    grid-row-end: 8;
  }
}


import styles from "./styles.module.scss";

const App = () => (
  <div className={styles.addTransaction}>
    <div className={styles.buySell}>
      <div>
        <button className={styles.buy}>BUY</button>
      </div>
      <div>
        <button className={styles.sell}>SELL</button>
      </div>
    </div>
    <div className={styles.token}>token</div>
    <div className={styles.quantity}>quantity</div>
    <div className={styles.price}>price</div>
    <div className={styles.date}>date</div>
    <div className={styles.exchange}>exchange</div>
    <div className={styles.totalSpent}>totalSpent</div>
    <div className={styles.addToCalc}>addToCalc</div>
    <div className={styles.submit}>submit</div>
  </div>
);

请提出更好的方法
谢谢

Answer 1

我建议使用网格库而不是创建自己的网格库。 Pure-CSS 有一个非常轻便的漂亮网格。

https://purecss.io/grids/

如果您想创建自己的网格，请以更加模块化的方式进行。我为我自己的项目做了一个模块，其中文件大小很关键，并为网格本身使用了框布局。您可以在此处查看起点。

https://github.com/domis4/wnderlvst-grid/blob/main/index.js

您的 React 模板将如下所示：

<div className="row">
    <div className="col-xs-6">Buy</div>
    <div className="col-xs-6">Sell</div>
</div>
<div className"row">
    <div className="col-xs-12">token</div>
</div>
<div className"row">
    <div className="col-xs-6">quantity</div>
    <div className="col-xs-6">price</div>
  [...]
</div>

Answer 2

一些让它更短的方法：

CSS 网格自动排列，因此您无需指定每一行和列，除非您要重新排序单元格
对于跨两列的单元格，您可以使用 shorthand 语法：
```
grid-column: auto / span 2;
```
如果您有很多具有相同属性的单元格（例如，跨越两列），您可以为它们添加一个通用的 class 名称。如果这不是一个选项，您还可以使用逗号链接多个选择器以添加公共属性：
```
.firstClass, .secondClass { example-property: 4px; }
```

结果短了很多

.addTransaction {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 50px;

  & div {
    border: solid 1px red;
  }

  & .buySell {
    display: grid;
    grid-template-columns: 0.5fr 0.5fr;
    column-gap: 5px;

    & .buy,
    & .sell {
      width: 100%;
    }
  }

  & .buySell,
  & .token,
  & .totalSpent,
  & .addToCalc,
  & .submit {
    grid-column: auto / span 2;
  }
}

https://codesandbox.io/s/react-and-scss-forked-t8hcw?file=/src/styles.module.scss

其他一些选项：

考虑 .grid-template-areas 真正复杂的布局。与多次手动指定 grid-column 或 grid-row 相比，它可以成为可读性救星。
应该只有第一行有空隙吗？您可以在任何地方添加该间隙，然后就不需要嵌套网格了。如果您的内容是嵌套的，您可以使用 display: contents 来展平 CSS 中的层次结构
```
& .addTransaction {
  /* ... */
  column-gap: 5px;

  /* ... */
  & .buySell { 
    display: contents;

    & button {
      width: 100%;
    }
  }
}
```

正在寻找一种更好的方法来编写此 css 网格 (scss)

Looking for a better way to write this css grid (scss)

sass

reactjs

css-grid