Блог

Как раз тогда, когда я думаю, что начинаю понимать этот материал… У меня возникли проблемы с тем, что css неправильно определяет размеры столбцов моей сетки. Приведенный ниже фрагмент демонстрирует проблему. Всего в сетке 12 столбцов. Предполагается, что первая строка должна быть 4, 2, 2, 2, 2 = 12. Вторая строка должна быть 3, 3, 3, 3 = 12.

Все столбцы второй строки должны быть одинаковой ширины, но css отображает первые два столбца так, чтобы текст заканчивался на «I1234», а вторые два так, чтобы текст заканчивался на «K1234» — так что они, очевидно, не равны. Интересно, что они правильно определяют размер, если я избавлюсь от первой строки.

Я разрабатываю это приложение для Chrome, но такая же проблема возникает и с Firefox.

Что я делаю не так? Спасибо — Джон

 .test-grid {
    display: grid; 
    gap: 5px;
    grid-template-areas: 
    "a a a a b b c c d d e e"
    "f f f g g g h h h i i i";
}

.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
.d { grid-area: d; }
.e { grid-area: e; }
.f { grid-area: f; }
.g { grid-area: g; }
.h { grid-area: h; }
.i { grid-area: i; }

input {
    width: 100%;
}


<div class="test-grid">

    <div class="a"><input type="text" value="A1234 B1234 C1234 D1234 E1234 F1234 G1234 H1234 I1234 J1234 K1234"></div>
    <div class="b"><input type="text" value="A1234 B1234 C1234 D1234 E1234 F1234 G1234 H1234 I1234 J1234 K1234"></div>
    <div class="c"><input type="text" value="A1234 B1234 C1234 D1234 E1234 F1234 G1234 H1234 I1234 J1234 K1234"></div>
    <div class="d"><input type="text" value="A1234 B1234 C1234 D1234 E1234 F1234 G1234 H1234 I1234 J1234 K1234"></div>
    <div class="e"><input type="text" value="A1234 B1234 C1234 D1234 E1234 F1234 G1234 H1234 I1234 J1234 K1234"></div>
    <div class="f"><input type="text" value="A1234 B1234 C1234 D1234 E1234 F1234 G1234 H1234 I1234 J1234 K1234"></div>
    <div class="g"><input type="text" value="A1234 B1234 C1234 D1234 E1234 F1234 G1234 H1234 I1234 J1234 K1234"></div>
    <div class="h"><input type="text" value="A1234 B1234 C1234 D1234 E1234 F1234 G1234 H1234 I1234 J1234 K1234"></div>
    <div class="i"><input type="text" value="A1234 B1234 C1234 D1234 E1234 F1234 G1234 H1234 I1234 J1234 K1234"></div>

</div>
  

Столбцы / строки CSS сетки не являются независимыми друг от друга, строки будут влиять друг на друга естественным образом.

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

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

Расчет выполняется следующим образом, учитывая, что ширина контейнера 1200px , а ширина содержимого (в данном случае ввода) равна 143px

1. 143 * 5 = 715px умножьте на количество входных данных, чтобы получить начальную ширину
2. 1200 - 715 = 485px вычтите начальную ширину из ширины контейнера, чтобы получить оставшееся пространство
3. 485 / 12 = 40.416666666666664px разделите оставшееся пространство на 12 желаемое количество столбцов

На этом этапе ширина столбцов определяется на основе того, 5 input initial width что есть только во второй строке 4 , вторая строка не может измениться, она просто будет следовать за ней, и браузер попытается ее разместить, отсюда и неравномерная ширина.

Решения

Равномерно используйте элементы сетки grid-auto-columns: 1fr; или более четко указывайте свои столбцы grid-template-columns:repeat(12,1fr);

 .test-grid {
  display: grid;
  grid-gap: 5px;
  grid-auto-columns: 1fr;
  grid-template-areas: "a a a a b b c c d d e e" "f f f g g g h h h i i i";
}

.test-grid>div {
  height: 100px;
  overflow:hidden; /* small screen sake, not needed */
}

.a {
  grid-area: a;
  background: red;
}

.b {
  grid-area: b;
  background: yellow;
}

.c {
  grid-area: c;
  background: black;
}

.d {
  grid-area: d;
  background: brown;
}

.e {
  grid-area: e;
  background: indigo;
}

.f {
  grid-area: f;
  background: pink;
}

.g {
  grid-area: g;
  background: green;
}

.h {
  grid-area: h;
  background: blue;
}

.i {
  grid-area: i;
  background: orange;
}  

 <div class="test-grid">
  <div class="a"><input type="text" value="A1234 B1234 C1234 D1234 E1234 F1234 G1234 H1234 I1234 J1234 K1234"></div>
  <div class="b"><input type="text" value="A1234 B1234 C1234 D1234 E1234 F1234 G1234 H1234 I1234 J1234 K1234"></div>
  <div class="c"><input type="text" value="A1234 B1234 C1234 D1234 E1234 F1234 G1234 H1234 I1234 J1234 K1234"></div>
  <div class="d"><input type="text" value="A1234 B1234 C1234 D1234 E1234 F1234 G1234 H1234 I1234 J1234 K1234"></div>
  <div class="e"><input type="text" value="A1234 B1234 C1234 D1234 E1234 F1234 G1234 H1234 I1234 J1234 K1234"></div>
  <div class="f"><input type="text" value="A1234 B1234 C1234 D1234 E1234 F1234 G1234 H1234 I1234 J1234 K1234"></div>
  <div class="g"><input type="text" value="A1234 B1234 C1234 D1234 E1234 F1234 G1234 H1234 I1234 J1234 K1234"></div>
  <div class="h"><input type="text" value="A1234 B1234 C1234 D1234 E1234 F1234 G1234 H1234 I1234 J1234 K1234"></div>
  <div class="i"><input type="text" value="A1234 B1234 C1234 D1234 E1234 F1234 G1234 H1234 I1234 J1234 K1234"></div>
</div>