文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在css中获得5×5网格？

问如何在css中获得5×5网格？
EN

Stack Overflow用户

提问于 2017-10-16 22:35:49

回答 1查看 4.4K关注 0票数 1

我有布局，下面。

如何使网格布局具有5行和5列，从而形成5×5网格？

.box {
  background-color: lightgrey;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.wrapper {
  width: 600px;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(2, 100px);
  grid-template-rows: 100px 100px 100px;
  grid-auto-flow: column;
}

<div class="wrapper">
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
  <div class="box box1">1</div>
</div>

html

css

reactjs

css-grid

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-10-16 22:46:29

你快到了。使用repeat创建5行和列。

grid-template-columns: repeat(5, 100px);
grid-template-rows: repeat(5, 100px);

body {
  margin: 40px;
}

.box {
  background-color: lightgrey;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.wrapper {
  width: 600px;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(5, 100px);
  grid-template-rows: repeat(5, 100px);
  grid-auto-flow: column;
}

<div class="wrapper">
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
  <div class="box box1">
    1
  </div>
</div>

票数 6

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46780038

复制

相似问题

问如何在css中获得5×5网格？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在css中获得5×5网格？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在css中获得5×5网格？
EN