Плітачка ў грід у CSS

Давайце пяройдзем да практычнай работы з сістэмай грід і створым плітачкі з рознымі водступамі.

Плітачка з 9 блокаў па 3 у шэраг без водступу

Давайце створым табліцу з дзевяці элементаў і размясцім іх па трох слупках:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	height: 100px;
	padding: 10px;
	border: 1px solid #696989;
}

Плітачка з 9 блокаў па 3 у шэраг з водступамі

Цяпер прымянім уласцівасць grid-gap для стварэння водступу паміж элементамі:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 10px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	height: 100px;
	padding: 10px;
	border: 1px solid #696989;
}

Плітачка з 9 блокаў па 3 у шэраг з водступамі толькі паміж блокамі

А цяпер давайце зададзім адлегласць толькі паміж блокамі ў грідзе:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 10px;
	border: 2px solid #696989;
	width: 600px;
}
#parent > div {
	height: 100px;
	padding: 10px;
	border: 1px solid #696989;
}

Плітачка з 8 блокаў па 3 у шэраг з якой не хапае блока

Давайце зробім плітачку, у якой у ніжнім шэрагу будзе не хапаць аднаго блока:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 10px;
	border: 2px solid #696989;
	width: 600px;
}
#parent > div {
	height: 100px;
	padding: 10px;
	border: 1px solid #696989;
}

Практычныя задачы

Рэалізуйце наступны прыклад: