栅格布局简单理解

1 效果

2 代码

.container {
        width: 100wv;
        height: 100hv;
        display: grid;
        place-content: center;
      }
      .container > .row {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 1em;
      }
      .container > .row > .center {
        text-align: center;
      }
      .container > .row > .col-12 {
        grid-column: span 12;
      }
      .container > .row > .col-11 {
        grid-column: span 11;
      }

3 总结

感谢老师教导！
主要理解好repeat fr span就可以了。
尝试用了文本对齐类。