HTMLCSS网格使用具有列文章区域，标题作为上面的行

cygmwpex 于 2023-03-05 发布在其他

关注(0)|答案(1)|浏览(101)

我正在寻找一种可能性，使用一行作为标题，下面的文章在列中。因为我添加了h2语义到文章_区域，我想实现这两个部分在一个对象中的不同布局。
目前它看起来像这样：

.article_area {
  text-align: justify;
  display: grid;
  gap: 10px;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
}

<section class="article_area">
  <h2>New Content</h2>
  <article>
    <header>
      <h2>Headline</h2>
    </header>
    <figure></figure>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac est sed quam finibus hendrerit. Suspendisse nunc mauris, rhoncus non ipsum et, finibus imperdiet magna. In dignissim pharetra lectus non.
    </p>
    <footer></footer>
  </article>
</section>

css

来源：https://stackoverflow.com/questions/75606840/html-css-grid-use-article-area-with-columns-header-as-row-above

1条答案

按热度按时间

2w2cym1i1#

您只需要将标题添加为网格的一部分。作为列之一，您可以将其展开以占据行的整个长度。可使用带边框的代码片段了解其工作原理。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  border: 1px solid red;
  text-align: center;
  padding: 10px;
  gap: 20px;
 }
 
.title-container {
  grid-column: 1/-1;
  border: 1px solid green;
 
}

.article {
  border: 1px solid blue;
}

<div class="grid-container"> 
  <div class="title-container">
    <h2>Some title</h2>
  </div>
  <div class="article">
    <h2>Some title</h2>
    <p>Article content</p>
  </div>
  <div class="article">
    <h2>Some title</h2>
    <p>Article content</p>
  </div>
  <div class="article">
    <h2>Some title</h2>
    <p>Article content</p>
</div>

赞(0）回复(0）举报 2023-03-05

我来回答

HTMLCSS网格使用具有列文章区域，标题作为上面的行

1条答案

相关问题

热门标签

最新问答