从 CSS 网格中排除标题

Question

我向 HTML 页面添加了一些子标题，但子标题导致列显示不正确，如此图所示。

我已经尝试过在子标题上显示块，但我认为使用 display: grid; 时有不同的方法

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px;
  background-color: #2196F3;
}
.grid-item {
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.8);
}

   

 <div class="grid-container">
  
  <a href="#"><div class="archive-title">Sub Header</div></a>

  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  
  <a href="#"><div class="archive-title">Sub Header</div></a>
  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div> 
  
  <a href="#"><div class="archive-title">Sub Header</div></a>
  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

每行而非列的子标题宽度应为 100%。

Answer 1

编辑：对

grid-column

div 使用

.archive-title

属性：

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px;
}

.grid-item {
  padding: 20px;
  background: gray;
  border: solid 1px lightgray;
}

.archive-title{
  background: lightgray;
  grid-column: 1/4;
}

<div class="grid-container">
  
  <div class="archive-title">Sub Header</div>
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  
  
    <div class="archive-title">Sub Header</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div> 
  
  
    <div class="archive-title">Sub Header</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

Answer 2

试试这个：

HTML

<div class="content">
    <a href="http://local.local/status/for-sale/"><h1 class="ap-template-sub-heading archive-title">Selling</h1></a>
    <div class="post-500 listing type-listing status-publish has-post-thumbnail types-single-family-home bedrooms-2-bedrooms price-500k-750k state-california city-encino status-for-sale entry">
        <div class="widget-wrap">
            <div class="listing-wrap">
                <a href="http://local.local/listings/16480-oldham-street/"><img width="500" height="300" src="http://placehold.it/500x300&text=Placeholder" class="attachment-properties size-properties" alt=""></a><span class="listing-price">$100,000</span><span class="listing-text">For Sale</span><span class="listing-address">Address</span><span class="listing-city-state-zip">State</span><a href="http://local.local/listings/16480-oldham-street/" class="more-link">Listing</a></div>
        </div>
    </div>
    <div class="post-498 listing type-listing status-publish has-post-thumbnail features-basement types-single-family-home bedrooms-3-bedrooms price-200k-500k state-california city-encino status-for-sale entry">
        <div class="widget-wrap">
            <div class="listing-wrap">
                <a href="http://local.local/listings/16520-adlon-road/"><img width="500" height="300" src="http://placehold.it/500x300&text=Placeholder" class="attachment-properties size-properties" alt=""></a><span class="listing-price">$100,000</span><span class="listing-text">Sold</span><span class="listing-address">Address</span><span class="listing-city-state-zip">State</span><a href="http://local.local/listings/16520-adlon-road/" class="more-link">Listing</a></div>
        </div>
    </div>
    <div class="post-489 listing type-listing status-publish has-post-thumbnail types-single-family-home bedrooms-3-bedrooms price-200k-500k state-california city-encino status-for-sale entry">
        <div class="widget-wrap">
            <div class="listing-wrap">
                <a href="http://local.local/listings/4010-rogen-drive/"><img width="500" height="300" src="http://placehold.it/500x300&text=Placeholder" class="attachment-properties size-properties" alt=""></a><span class="listing-price">$100,000</span><span class="listing-text">For Sale</span><span class="listing-address">Address</span><span class="listing-city-state-zip">State</span><a href="http://local.local/listings/4010-rogen-drive/" class="more-link">Listing</a></div>
        </div>
    </div>


    </div><a href="http://local.local/status/sold/"><h1 class="ap-template-sub-heading archive-title">Sold</h1></a>

    <div class="post-488 listing type-listing status-publish has-post-thumbnail types-single-family-home bedrooms-4-bedrooms price-500k-750k state-california city-encino status-for-sale entry">
        <div class="widget-wrap">
            <div class="listing-wrap">
                <a href="http://local.local/listings/17055-mooncrest-drive/"><img width="500" height="300" src="http://placehold.it/500x300&text=Placeholder" class="attachment-properties size-properties" alt=""></a><span class="listing-price">$100,000</span><span class="listing-text">For Sale</span><span class="listing-address">Address</span><span class="listing-city-state-zip">State</span><a href="http://local.local/listings/17055-mooncrest-drive/" class="more-link">Listing</a></div>
        </div>
    <div class="post-504 listing type-listing status-publish has-post-thumbnail types-single-family-home bedrooms-4-bedrooms price-500k-750k state-california city-encino status-sold entry">
        <div class="widget-wrap">
            <div class="listing-wrap">
                <a href="http://local.local/listings/17038-cotter-place/"><img width="500" height="300" src="http://placehold.it/500x300&text=Placeholder" class="attachment-properties size-properties" alt=""></a><span class="listing-price">$100,000</span><span class="listing-text">Sold</span><span class="listing-address">Address</span><span class="listing-city-state-zip">State</span><a href="http://local.local/listings/17038-cotter-place/" class="more-link">Listing</a></div>
        </div>
    </div>
    <div class="post-496 listing type-listing status-publish has-post-thumbnail types-single-family-home bedrooms-4-bedrooms price-500k-750k state-california city-encino status-sold entry">
        <div class="widget-wrap">
            <div class="listing-wrap">
                <a href="http://local.local/listings/16760-octavia-place/"><img width="500" height="300" src="http://placehold.it/500x300&text=Placeholder" class="attachment-properties size-properties" alt=""></a><span class="listing-price">$100,000</span><span class="listing-text">For Sale</span><span class="listing-address">Address</span><span class="listing-city-state-zip">State</span><a href="http://local.local/listings/16760-octavia-place/" class="more-link">Listing</a></div>
        </div>
    </div>
</div>

问题是“已售出”链接出现在第四张卡之后。现在链接已添加到第三张卡之后。

Answer 3

首先，您可以在第三个元素列表之后添加“已售出”超链接..这会很棒。 如果您无法做到这一点，那么您必须使用

DISPLAY : FLEX

属性。在显示 Flex 属性中，您可以轻松更改元素的顺序...所以可以尝试显示 Flex...