CSS Строки сетки имеют разную ширину - PullRequest
Новая
       3

CSS Строки сетки имеют разную ширину

1 голос
/ 10 января 2020

У меня проблема с сеткой css. Мне интересно, возможно ли иметь разную ширину для каждой строки моей сетки.

Моя сетка настроена следующим образом: 

.section.section--3 .text {
    display: grid;
    justify-content: center;
    padding: 0 10% 0;
    text-align: center;
}

Поэтому я в основном хочу свой заголовок, абзац и кнопка, вложенная в мой текстовый div, имеет разную ширину без использования max-width и не заполняет всю строку. Причина, по которой моя кнопка должна динамически изменяться по ширине в зависимости от длины текста внутри.

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

<div class="text">
    <h2 class="text__item item--heading">
        Heading
    </h2>
    <p class="text__item item--paragraph">
        Paragraph
    </p>
    <a href="#" class="text__item item--button button button--primary">
        Button
    </a>
</div>

Это изображение иллюстрирует в основном то, чего я хочу достичь .

сетка изображений

Спасибо.

1 Ответ

0 голосов
/ 10 января 2020

Да, это возможно, и так по-разному.

Позвольте мне показать один из них: 

.grid {
  
  display: grid;
  
  grid-template-columns: 20% 60%; /* Column width size here*/
  grid-template-rows: 100px 200px; /* Row height size here*/
  
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.item.a{
  background-color: red;
}

.item.b{
  background-color: green;
}

.item.c{
  background-color: blue;
}

.item.d{
  background-color: yellow;
}
<div class="grid">
  <div class="item a"></div>
  <div class="item b"></div>
  <div class="item c"></div>
  <div class="item d"></div>
</div>

Если вам действительно нравится CSS Grid Layout и вы хотите узнать больше о, я бы порекомендовал вам этот сайт здесь .

Надеюсь, это поможет, :)

...