CSS-এ অভিযোজিত টাইলস بدون মার্জিন

আসুন একটি টাইল তৈরি করি যার স্ক্রিনের প্রস্থের উপর নির্ভর করে প্রতি সারিতে বিভিন্ন সংখ্যক ব্লক থাকবে। এখানে একটি উদাহরণ দেওয়া হলো যা আমাদের পাওয়া উচিত:

প্রথমে HTML কোড লিখি:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
	<div class="child">10</div>
	<div class="child">11</div>
	<div class="child">12</div>
</div>

এখন ব্লকগুলির প্যারেন্টে স্টাইল যোগ করি:

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 95%;
	margin: 50px auto;
}

এখন ব্লকগুলিকেই স্টাইল দেই, তাদের প্রস্থ নির্ধারণ না করে:

.child {
	box-sizing: border-box;
	height: 100px;
	padding: 20px;
	border: 1px solid green;
}

এটা স্পষ্ট যে ব্লকগুলির প্রস্থ শতাংশে হওয়া উচিত, যাতে স্ক্রিন পরিবর্তন হলে ব্লকগুলি তাদের প্রস্থ মসৃণভাবে পরিবর্তন করতে পারে। একই সময়ে, নির্দিষ্ট স্ক্রিনের আকারে আমাদের ব্লকগুলির প্রস্থ পরিবর্তন করা উচিত, যাতে প্রতি সারিতে একটি নির্দিষ্ট সংখ্যক ব্লক ফিট হয়।

আসুন একটি কোড লিখি যা চারটি ব্লককে এক সারিতে রাখবে:

@media (min-width: 1000px) {
	.child {
		width: 25%;
	}
}

এবং এখন তিনটি ব্লককে এক সারিতে রাখি:

@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: 33.3333%;
	}
}

এবং এখন দুটি ব্লককে এক সারিতে রাখি:

@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: 50%;
	}
}

একটি ব্লক প্রতি সারি:

@media (max-width: 400px) {
	.child {
		width: 100%;
	}
}

আসুন সমস্ত কোড একত্রিত করি:

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 95%;
	margin: 50px auto;
}
.child {
	box-sizing: border-box;
	height: 100px;
	padding: 20px;
	border: 1px solid green;
}

@media (max-width: 400px) {
	.child {
		width: 100%;
	}
}
@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: 50%;
	}
}
@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: 33.3333%;
	}
}
@media (min-width: 1000px) {
	.child {
		width: 25%;
	}
}

আমার কোডটি এমনভাবে পরিবর্তন করুন যাতে ব্লকগুলির প্রস্থ calc ফাংশনের মাধ্যমে গণনা করা হয়।

একটি টাইল তৈরি করুন যা স্ক্রিনের আকার ছোট হওয়ার সাথে সাথে প্রথমে প্রতি সারিতে চারটি উপাদান, তারপর প্রতি সারিতে দুটি উপাদান, এবং তারপর একটি উপাদান প্রতি সারিতে দেখাবে।

একটি টাইল তৈরি করুন যা স্ক্রিনের আকার ছোট হওয়ার সাথে সাথে প্রথমে প্রতি সারিতে ছয়টি উপাদান, তারপর প্রতি সারিতে তিনটি উপাদান, এবং তারপর একটি উপাদান প্রতি সারিতে দেখাবে।