寻找更好的方法来编写这个 css 网格 (scss)

Question

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

.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

一些使它更短的方法：

• CSS 网格会自动流动，因此您无需指定每一行和每一列，除非您对单元格重新排序
• 对于跨两列的单元格，您可以使用简写语法：

  grid-column: auto / span 2;
  

• 如果您有很多具有相同属性的单元格（例如跨越两列），您可以为它们添加一个通用类名。如果这不是一个选项，您还可以使用逗号链接多个选择器以添加公共属性：

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

Answer 2

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

https://purecss.io/grids/

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

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

您的反应模板将如下所示：

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