सीएसएस में ग्रिड टाइल

आइए ग्रिड सिस्टम के साथ व्यावहारिक कार्य पर आगे बढ़ें और विभिन्न इंडेंटेशन वाली टाइलें बनाएं।

बिना गैप के एक पंक्ति में 3 के साथ 9 ब्लॉकों वाली टाइल

आइए नौ तत्वों वाली एक तालिका बनाएं और उन्हें तीन कॉलम में व्यवस्थित करें:

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

गैप के साथ एक पंक्ति में 3 के साथ 9 ब्लॉकों वाली टाइल

अब तत्वों के बीच गैप बनाने के लिए 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;
}

केवल ब्लॉकों के बीच गैप के साथ एक पंक्ति में 3 के साथ 9 ब्लॉकों वाली टाइल

और अब आइए ग्रिड में केवल ब्लॉकों के बीच दूरी निर्धारित करें:

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

गायब ब्लॉक के साथ एक पंक्ति में 3 के साथ 8 ब्लॉकों वाली टाइल

आइए एक ऐसी टाइल बनाएं जिसमें निचली पंक्ति में एक ब्लॉक की कमी हो:

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

व्यावहारिक कार्य

निम्नलिखित उदाहरण लागू करें: