Блог

Главная - Вопросы по программированию - Предотвращение растягивания элемента в столбце сетки CSS

Предотвращение растягивания элемента в столбце сетки CSS

#html #css #sass #css-grid

Вопрос:

У меня есть следующие HTML и CSS:

 .grid {
  display: grid;
  grid-template-areas:
    '. b b b b b b . p p p .'
    '. b b b b b b . s s s .';
  
  amp;__item {
    align-self: start;
    background-color: #999;
    
    amp;--body {
      grid-area: b;
      height: 20rem;
    }
    
    amp;--primarySidebar {
      grid-area: p;
    }
    
    amp;--secondarySidebar {
      grid-area: s;
    }
  }
} 
 <div class="grid">
  <div class="grid__item grid__item--body">
    Body
  </div>
  <div class="grid__item grid__item--primarySidebar">
    Primary sidebar
  </div>
  <div class="grid__item grid__item--secondarySidebar">
    Secondary sidebar
  </div>
</div>

Результат выглядит следующим образом:

введите описание изображения здесь

Кодовый код здесь: https://codepen.io/CaribouCode/pen/RwgRPvb

Похоже primarySidebar , он растянулся, чтобы заполнить 50% общей высоты. Как мне предотвратить это и, следовательно, удалить пробел между primarySidebar и secondarySidebar ?

Примечание: Важно, чтобы я использовал сетку и эту структуру DOM по другим причинам, поэтому я ищу здесь некоторые свойства CSS, которые я могу добавить, чтобы избежать нежелательного вертикального пространства.

Ответ №1:

Один из вариантов состоит в том , чтобы изменить поток на column и указать первые две строки как auto , а затем указать, чтобы основная область охватывала 3 строки…вот так.

 .grid {
  display: grid;
  width:100%;
  gap: 0.5em;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto auto 1fr;
  grid-auto-flow: column;
}

.grid__item {
  background-color: #999;
}

.grid__item--body {
  grid-column: span 8;
  grid-row: span 3;
  height: 20rem;
}

.grid__item--primarySidebar {
  grid-column: span 4;
}

.grid__item--secondarySidebar {
  grid-column: span 4;
} 
 <div class="grid">
  <div class="grid__item grid__item--body">
    Body
  </div>
  <div class="grid__item grid__item--primarySidebar">
    Primary sidebar Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi sint recusandae non ipsum vitae in vel labore quia corporis magni.
  </div>
  <div class="grid__item grid__item--secondarySidebar">
    Secondary sidebar Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi sint recusandae non ipsum vitae in vel labore quia corporis magni
  </div>
</div>

Комментарии:

1. Это выглядит так, как будто он меняет дизайн с определенного макета из 12 столбцов (который требуется, когда я добавляю медиа-запросы позже) на макет из 2 столбцов равной ширины.

2. @CaribouCode Обновление ответа, но принцип тот же.

Ответ №2:

 .grid {
  display: grid;
  gap: 2px;
  /* define the number of grid columns */
  grid-template-columns: repeat( 12, minmax(250px, 1fr) );
  grid-template-rows: auto auto 1fr;
  grid-auto-flow: column;
}

.grid__item {
  background-color: #999;
}

.grid__item--body {
  grid-column: 1;
  grid-row: span 3;
  height: 20rem;
}

.grid__item--primarySidebar {
  grid-column: 2;
  white-space: break-spaces;
}

.grid__item--secondarySidebar {
  grid-column: 2;
  white-space: break-spaces;
} 
 <div class="grid">
  <div class="grid__item grid__item--body">
    Body
  </div>
  <div class="grid__item grid__item--primarySidebar">
    Primary sidebar
  </div>
  <div class="grid__item grid__item--secondarySidebar">
    Secondary sidebar
  </div>
</div>

Комментарии:

1. Это, кажется, удаляет мой макет сетки из 12 столбцов, который мне нужен при расширении этого дизайна

2. Пожалуйста, ознакомьтесь с скорректированным CSS. Эта ссылка: » css-tricks.com/… » будет полезно внести коррективы при расширении вашего дизайна.

Ответ №3:

Я думаю, что это не проблема с сеткой — вы добавили высоту 20 метров в теле, но не в боковых панелях — вы можете попробовать добавить по 10 метров на каждую или 100%

Метки: