代码之家 › 专栏 › 技术社区 › Armeen Moon

使用CSS网格查找模式重复列的更简洁语法?

css-grid syntax css3 css html

2

Armeen Moon · 技术社区 · 6 年前

有没有什么语法可以重复这个精确的网格布局?

.grid-system {    
  grid-template-columns: 42px 48px 42px 48px 42px 48px 42px 48px 42px 48px 42px;
}

我试过了,但似乎没用:

.grid-system {    
  grid-template-columns: repeat(11, 42px, 48px);
}

这是一支代码笔,详细说明如下:

https://codepen.io/matthewharwood/pen/vPXWmm

如你所见,设计打破了默认的网格系统,所以我做了一个扁平的网格。( samba-flat-grid )W/O间隙补偿:

1 回复 | 直到 6 年前

1

2

kukkuz 6 年前

它是 grid-template-columns: repeat(11, 42px 48px) -没有空间他们之间。检查 here 所有的可能性。

参见下面的演示:

.samba-grid {
  display: grid;
  grid-template-columns: repeat(12, 42px);
  background: pink;
  width: 100%;
  column-gap: 48px;
}

.samba-flat-grid {
  display: grid;
  grid-template-columns: repeat(11, 42px 48px); /* CHANGED */
  background: yellow;
  width: 100%;
}

.container {
  width: 100%;
  max-width: 1032px;
  margin: 0 auto;
  background: green;
}

.section {
  width: 100%;
  display: block;
  background: papayawhip;
}

.element-1 {
  grid-column-start: 1;
  grid-column-end: span 6;
}

.element-2 {
  grid-column-start: 7;
  grid-column-end: span 6;
}

.element-inner-img {
  background: blue;
  grid-column-start: 1;
  grid-column-end: span 6;
}

.element-inner-img img {
  width: 100%;
}

.element-inner-content {
  background: #b000b5;
  grid-column-start: 7;
  grid-column-end: 12;
}

<div class="section">
  <div class="container">
    <div class="samba-grid">
      <div class="element-1">
        <div class="samba-flat-grid">
          <div class="element-inner-img">
            <img src="https://placebear.com/1600/900" alt="">
          </div>
          <div class="element-inner-content">
            <p>Hello World</p>
          </div>
        </div>
      </div>
      <div class="element-2">

        <div class="samba-flat-grid">
          <div class="element-inner-img">
            <img src="https://placebear.com/1600/900" alt="">
          </div>
          <div class="element-inner-content">
            <p>Hello World</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>