Css сетка от единицы

Question

В сетке Css я могу сделать:

.grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}

Есть ли способ установить ширину определенных элементов.

Например:

.grid { display: grid}

и в html:

<div class="grid">
<p class="fr-1>text1</p>
<p class="fr-2>text1</p>
<p class="fr-1>text1</p>
</div>

Answer 1

Да! Вот как ты это делаешь. Вы захотите использовать функцию CSS minmax.

.grid {
    display: grid;
    grid-template-columns: minmax(100px, 1fr) minmax(200px, 2fr) minmax(100px,1fr);
}

<div class="grid">
   <p class="fr-1">text1</p>
   <p class="fr-2">text1</p>
   <p class="fr-1">text1</p>
</div>

и если вы хотите специально назначить эти классы этому пространству в сетке, вам нужно сохранить эти имена классов в тегах p, а затем добавить этот CSS в приведенный выше фрагмент.

.fr-1 {
  grid-column: 1/2;
}
.fr-2 {
  grid-column: 2/3;
}
.fr-3 {
  grid-column: 3/4;
}

также, с помощью CSS-сетки вы можете также назвать ваши столбцы, что очень полезно, особенно при добавлении медиа-запросов. Вот как это сделать ниже.

.grid {
        display: grid;
        grid-template-columns: [name-start] minmax(100px, 1fr) [name-end name-two-start] minmax(200px, 2fr) [name-two-end name-three-start] minmax(100px,1fr) [name-three-end];
    }

.fr-1 {
  grid-column: name-start/name-end;
}
.fr-2 {
  grid-column: name-two-start/name-two-end;
}
.fr-3 {
  grid-column: name-three-start/name-three-end;
}

Вы можете называть эти столбцы как хотите. В этом примере я использовал; имя-начало, имя-два-начало и т. д.

надеюсь, это поможет. Дайте мне знать, если я неправильно понял, и я постараюсь помочь вам решить вашу проблему снова.

Answer 2

Это больше подходит для макета flexbox, где вы можете использовать flex-grow

.grid {
  display: flex
}

.fr-1 {
  flex-grow: 1;
  border:1px solid red;
}

.fr-2 {
  flex-grow: 2;
  border:1px solid green;
}

<div class="grid">
  <p class="fr-1">text1</p>
  <p class="fr-2">text1</p>
  <p class="fr-1">text1</p>
</div>
<div class="grid">
  <p class="fr-1">text1</p>
  <p class="fr-1">text1</p>
  <p class="fr-2">text1</p>
</div>