Question

是否可以指定网格中的行数和列数？

我的代码给了我3列4行。我想要4列和3行。有没有办法用CSS和HTML进行操作？我也愿意使用Bootstrap，尝试正确地编辑下面的代码。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<body>
<div class="items-row sppb-row row-0 row clearfix">
  <div class="col-sm-4">
    <article class="bt-inner item column-1 item-featured" itemprop="blogPost" itemscope="" itemtype="http://schema.org/BlogPosting">
      <div class="entry-image intro-image"> </div>
      <div class="entry-header"id="test1">
        <h2 itemprop="name">one row title</h2>
      </div>
      <div class="autoreadmore"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
    </article>
  </div>
  <div class="col-sm-4">
    <article class="bt-inner item column-2 item-featured" itemprop="blogPost" itemscope="" itemtype="http://schema.org/BlogPosting">
      <div class="entry-image intro-image"> </div>
      <div class="entry-header" id="test2">
        <h2 itemprop="name">one row title, one row title, one row title</h2>
      </div>
      <div class="autoreadmore"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
    </article>
    <!-- end item --> 
  </div>
  <!-- end col-sm-* -->
  <div class="col-sm-4">
    <article class="bt-inner item column-3 item-featured" itemprop="blogPost" itemscope="" itemtype="http://schema.org/BlogPosting">
      <div class="entry-image intro-image"> </div>
      <div class="entry-header" id="test3">
        <h2 itemprop="name">one row title 2</h2>
      </div>
      <div class="autoreadmore">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </article>
  </div>
</div>
</body>

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

Answer 1

使用Bootstrap 4-3行x 4列

<div class="container">
  <!-- row one -->
  <div class="row">
    <div class="col-sm-3">
      content
    </div>
    <div class="col-sm-3">
      content
    </div>
    <div class="col-sm-3">
      content
    </div>
    <div class="col-sm-3">
      content
    </div>
  </div><!-- /.row -->
  <!-- row two -->
  <div class="row">
    <div class="col-sm-3">
      content
    </div>
    <div class="col-sm-3">
      content
    </div>
    <div class="col-sm-3">
      content
    </div>
    <div class="col-sm-3">
      content
    </div>
  </div><!-- /.row -->
  <!-- row three -->
  <div class="row">
    <div class="col-sm-3">
      content
    </div>
    <div class="col-sm-3">
      content
    </div>
    <div class="col-sm-3">
      content
    </div>
    <div class="col-sm-3">
      content
    </div>
  </div><!-- /.row -->

</div><!-- /.container -->

当然，您需要链接到Bootstrap CDN才能工作

Answer 2

您可以使用grid-template-columns指定列数。
列数由列表中的值数定义。

下面，我使用repeat()作为速记来生成四个值。
根据您现有的代码，auto auto auto auto也可以使用。

另请参阅CSS Grid Layout。

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  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;
}

<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 class="grid-item">10</div>
  <div class="grid-item">11</div>
  <div class="grid-item">12</div>
</div>

指定网格中的行数和列数

2 个答案: