एक्सप्लिसिट ग्रिड्स

ग्रिड प्रणाली एक्सप्लिसिट और इम्प्लिसिट ग्रिड के उपयोग को दर्शाती है। आइए इन अवधारणाओं को विस्तार से समझते हैं।

एक्सप्लिसिट ग्रिड कॉलम और पंक्तियों में व्यवस्थित तत्वों का एक सेट है। अक्सर एक्सप्लिसिट ग्रिड मैन्युअल रूप से बनाई जाती है और पिछले पाठों में हमारे द्वारा बनाई गई सभी ग्रिड्स एक्सप्लिसिट हैं (उदाहरण के लिए, पाठ ग्रिड में टाइल्स)।

आइए एक ग्रिड बनाते हैं जो हमारी एक्सप्लिसिट ग्रिड होगी:

<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;
}