იმპლიციტური ბადეები CSS-ში

იმპლიციტური ბადე იქმნება ბრაუზერის მიერ ავტომატურად, როდესაც ელემენტების რაოდენობა არ ეტევა ექსპლიციტურ ბადეში. მოდით ვნახოთ, როგორ ხდება ეს.

დავუშვათ, გვაქვს ოთხი ბლოკი:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem3">4</div>
</div>

დავუშვათ, ჩვენი ბადის ზომებია 3 ზე 3:

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

განვათავსოთ სამი ბლოკი ბადეში:

#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
}
#elem2 {
	grid-row: 2 / 3;
	grid-column: 2 / 3;
}
#elem3 {
	grid-row: 3 / 4;
	grid-column: 3 / 4;
}

მეოთხე ბლოკი კი განვათავსოთ მეოთხე რიგში და სვეტში:

#elem4 {
	grid-row: 4 / 5;
	grid-column: 4 / 5;
}

ვინაიდან ჩვენი ბადის ზომაა 3 ზე 3, მაშინ ასეთი მეოთხე რიგი და სვეტი ამ ბადეში არ იქნება. მაგრამ ისინი არ იქნება ექსპლიციტურ ფორმაში, ანუ ჩვენ მიერ განსაზღვრულში. მაგრამ ბრაუზერი შექმნის მათ იმპლიციტურად, ანუ თავისით.

ამ შემთხვევაში, რადგან ზომები მხოლოდ ექსპლიციტური ბადისთვის მივუთითეთ, მაშინ უჯრედებისთვის ამ ბადის გარეთ ზომები გამოითვლება ბრაუზერის მიერ. ანუ ჩვენს შემთხვევაში მეოთხე ბლოკის ზომები დაყენებული იქნება ბრაუზერის მიერ ავტომატურად.

მოდით ვნახოთ, რა მივიღეთ:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 50px 50px 50px;
	grid-template-rows: 50px 50px 50px;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
}
#elem2 {
	grid-row: 2 / 3;
	grid-column: 2 / 3;
}
#elem3 {
	grid-row: 3 / 4;
	grid-column: 3 / 4;
}
#elem4 {
	grid-row: 4 / 5;
	grid-column: 4 / 5;
}

დავუშვათ, თქვენს ბადეში 6 ბლოკია. განათავსეთ 3 ბლოკი ექსპლიციტურ ბადეში, და სამი ბლოკი იმპლიციტურ ბადეში.