Как в excel сделать строки одинаковой высоты - Учим Эксель

Создаём CSS-сетку подходящего размера

У нас идёт цикл статей о современном CSS: как на нём собирать штуки, о которых ранее мы могли лишь грезить. В прошедший раз мы гласили о CSS-сетке Grid. Сейчас мы её будем настраивать.

  • В CSS есть много методов расставить объекты на страничке: по абсолютным координатам, относительно друг дружку, закрепив в каком-то месте странички и т. д.
  • Один из нужных для веб-разработчика методов — поделить страничку на столбцы и строки, как как будто это таблица либо сетка. И снутри данной сетки расставить объекты.
  • Инструмент Grid как раз помогает нарисовать на страничке воображаемую сетку и сглаживать объекты по ней.
  • Grid довольно гибкий, чтоб учитывать меняющуюся ширину экрана и прогнозируемо управлять столбцами и строчками.

Сейчас поработаем с размером ячеек сетки, чтоб в последующий раз собрать из их что-то вправду полезное.

Готовим шаблон

Начнём с пустого шаблона. Чтоб было наглядно видно, как в сетке размещаются ячейки, создадим так:

  1. Сделаем общий класс, который будет отвечать за сетку полностью. Пока не будем созодать разбивку на строки и столбцы.
  2. В нём создадим видимые наружные границы — так мы поймём, какого размера сетка у нас выходит.
  3. Каждую ячейку закрасим оранжевым цветом, чтоб созидать, где завершается одна ячейка и начинается иная.
  4. Добавим в оформление ячеек отступы и скругления для красы.
  5. Опосля этого в теле странички сделаем новейший блок и применим к нему наш стиль с сетью.
  6. Добавим 10 новейших частей в сетку и поглядим, что получится.

Вот что у нас выходит, если у сетки не задавать никаких характеристик:

  • элементы размещаются друг под другом в одну колонку;
  • сетка растягивается по ширине на весь экран;
  • элементы тоже растягиваются по ширине;
  • по высоте сетка занимает ровно столько, чтоб вместить всё содержимое. На всю высоту сетка автоматом не растягивается.
Интересно почитать:  Excel как удалить пустые строки в таблице

Формируем строки и столбцы

Давайте поглядим, как добавление строк и столбцов в сетку влияет на положение и размер ячеек.

Создадим в сетке три колонки по 150 пикселей:

grid-template-columns: 150px 150px 150px;

Сетка сходу уменьшилась по высоте, подстраиваясь под количество частей. Сейчас укажем подходящую высоту для частей:

Смотрите, высота поменялась лишь у первой строки. Другие остались той же высоты, что и ранее, поэтому что мы указали лишь один параметр в команде grid-template-rows. Создадим 5 строк одинаковой высоты:

grid-template-rows: 50px 50px 50px 50px 50px ;

Потому что мы очевидно указали, что нам в сетке необходимо 5 строк, то у нас возникла пустая 5-ая строчка. В ней пока никаких частей, но сетка уже предугадала для их свободное пространство.

Чтоб не писать 5 раз попорядку размер 50px, можно применять такую команду:

grid-template-rows: repeat(5, 50px);

Она повторяет подходящий нам размер (50 пикселей) определённое количество раз — в нашем случае это 5 раз. То же самое работает и с колонками — создадим 4 однообразные колонки используя функцию repeat():

grid-template-columns: repeat(4, 150px);

Адаптивные размеры и автозаполнение

Сейчас создадим так:

  • поставим три строки заместо 5;
  • последнюю строчку растянем вниз до конца окна — используем для этого 1fr;
  • столбцы создадим одинаковой ширины.

Запишем это в разделе со стилями:

grid-template-rows: 50px 1fr 50px;
grid-template-columns: repeat(4, 1fr);

Кажется, что 1fr, который был должен растянуть вторую строчку на всё свободное пространство, не работает. Но с ним всё в порядке, ошибки здесь нет, смотрите, что вышло по сути:

  1. 1-ая строчка получила ширину 50 пикселей.
  2. 3-я строчка тоже получила 50 пикселей.
  3. Опосля этого браузер, смотря на 1fr, стал высчитывать, какую высоту сделать у 2-ой строки.
  4. Браузер понимает, что 1fr должен заполнить всё оставшееся свободное пространство в сетке, но у нас нижняя граница сетки прилегает впритирку к крайней строке.
  5. Это означает, что вольного места в сетке нет, потому браузер учёл все внутренние отступы из общих опций ячейки и сделал вторую строчку малой высоты.
Интересно почитать:  Как вставить строки в таблицу excel

Чтоб это поправить, нам необходимо очевидно задать общую высоту сетки — к примеру в пикселях:

Чтоб сетка растянулась по высоте на всё окно, употребляют относительные единицы, к примеру, vh — она показывает, сколько процентов от высоты окна будет занимать элемент. Чтоб растянуть сетку до края, напишем:

Полосы прокрутки возникли из-за того, что общий размер сетки у нас больше 100% высоты окна — к высоте добавились наружные и внутренние отступы сетки.

Если нам необходимо сделать столбцы и строки в определённых пропорциях, также используем fr — он подгонит всё под размер окна:

height: 92vh;
grid-template-columns: 1fr 2fr 2fr 1fr ;
grid-template-rows: 50px 1fr 50px;

Сейчас у нас вышел прекрасный шаблон на 12 ячеек:

  • верхняя и нижние строки высотой по 50 пикселей;
  • средняя растягивается на всю высоту;
  • 2-ая и 3-я колонки в дважды обширнее, чем боковые.

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

Что далее

Статья вышла большенный, потому про работу с ячейками и областями сетки побеседуем в иной раз. А позже сверстаем на сетке всеполноценную страницу-портфолио.

Ссылка на основную публикацию
Adblock
detector