offline version v3

Запись на курсы по HTML, CSS, JavaScript, PHP, фреймворкам и CMS,
а также: помощь в поиске работы и заказов, стажировка на реальных проектах→

⊗mkPmGdFRp 225 of 249 menu

Функция repeat в CSS гридах

Если у вас несколько столбцов, для которых задаются одинаковые размеры, то можно упростить запись, использовав функцию repeat. В первом параметре этой функции указывается количество столбцов, а во втором - их ширина. Давайте посмотрим на примерах, как это работает.

Пример

Пусть у нас есть три колонки одинакового размера:

#parent {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

Упростим запись с помощью repeat:

#parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

Пример

Пусть у нас есть три колонки одинакового размера, а четвертая другого размера:

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

Упростим запись с помощью repeat:

#parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr) 2fr;
}

Пример

Пусть у нас есть первые три колонки одного размера, а вторые три колонки другого размера:

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

Упростим запись с помощью repeat:

#parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}

Пример

Пусть у нас есть первые три колонки одного размера, а вторые три колонки другого размера:

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

Упростим запись с помощью repeat:

#parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}

Пример

Пусть у нас есть первые три колонки одного размера, потом еще колонка, а потом еще три колонки другого размера:

#parent {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}

Упростим запись с помощью repeat:

#parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}

Пример

Упрощение работает для любых единиц размеров. Пусть для примера у нас есть три колонки в пикселях:

#parent {
	display: grid;
	grid-template-columns: 200px 200px 200px;
}

Упростим запись с помощью repeat:

#parent {
	display: grid;
	grid-template-columns: repeat(3, 200px);
}

Практические задачи

Сделайте 4 столбца одинакового размера при помощи repeat.

Сделайте 4 столбца размером 100px, а еще 3 столбца размером 2fr.

Сделайте 2 столбца размером 100px, еще 3 столбца размером 200px, потом столбец размером 1fr, и потом 2 столбца размером 10%.

↑