Гридҳои Ошкора

Системаи грид истифодаи гридҳои ошкор ва гридҳои нозоҳир-ро дар назар дорад. Биёед ин мафҳумҳоро ба тафсил баррасӣ кунем.

Гриди ошкор маҷмӯъи элементҳоест, ки дар сутунҳо ва сатрҳо ҷойгир шудаанд. Аксар вақт гриди ошкор дастӣ сохта мешавад ва ҳама гридҳое, ки мо бо шумо дар дарсҳои гузашта сохта будем, ошкор мебошанд (масалан, дарси кاشی дар грид).

Биёед як ҷадвал эҷод кунем, ки ҳамон гриди ошкори мо хоҳад буд:

<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: 1fr 1fr 1fr / 1fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}