Исключить заголовки из CSS Grid - PullRequest
Новая
       2

Исключить заголовки из CSS Grid

0 голосов
/ 30 июня 2019

Я добавил некоторые подзаголовки на страницу HTML, но подзаголовок приводит к некорректному отображению столбцов, как показано на этом рисунке.

enter image description here

IЯ уже пробовал отображать блок в подзаголовке, но я предполагаю, что при использовании 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% для каждой строки, а не для столбца.

Ответы [ 3 ]

2 голосов
/ 06 июля 2019

Редактировать: использовать свойство grid-column для .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>
0 голосов
/ 30 июня 2019

Решение:

Сначала вы можете добавить гиперссылку "Продано" после перечисления трех элементов ... это будет здорово.Если вы не можете этого сделать, вам нужно использовать DISPLAY: FLEX свойство..В свойстве display flex вы можете легко изменить порядок элемента ... так что можете попробовать display flex ...

0 голосов
/ 30 июня 2019

Попробуйте это:

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>

Проблема заключалась в том, что ссылка Продано появлялась после четвертой карты. Теперь ссылка добавляется после третьей карты.

...