Question

我尝试创建一个包含3列的css网格，我可以添加任意数量的具有相同高度的“内容DIV”，这些将按顺序添加，如下所示：

[1][2][3]
[4][5][6]
[7][8]

任何帮助将不胜感激:)

Answer 1

你走了：

.container{
    display: flex;
    flex-wrap: wrap;
    padding: 0 2px;
    margin: 0 16px 16px 16px;
}

.cell{
    padding: 10px;
    width: 33.333%;
    word-wrap: break-word;
    box-sizing: border-box;
    border: 1px solid #ccc;
}

Answer 2

通过在网格容器上使用grid-template-columns: repeat(3, 1fr)，您将得到3列宽度相等的布局，默认情况下网格布局会使每行中的所有项目都相等。

＆＃13;

let n = $('.grid .item').last().text();

$('.grid').click(function() {
  const item = $('<div class="item">')
  const text = (n % 7 != 0 ? '' : ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, corporis.')
  item.text(++n + text)
  $(this).append(item)
})

＆＃13;

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
.item {
  border: 1px solid black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid">
  <div class="item">1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, corporis.</div>
  <div class="item">2</div>
</div>

＆＃13;

Answer 3

网格布局必须有一个父元素， display 属性设置为 grid 或 inline-grid 。

网格容器的直接子元素自动成为网格项。

尝试以下

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>Grid Elements</h1>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>
</html>

＆＃13;

如何创建包含3列和无限量项目的CSS网格

3 个答案: