CSS-এ মিডিয়া কুয়েরির মাধ্যমে ব্লক পুনর্বিন্যাস

বিভিন্ন স্ক্রিন প্রস্থে ব্লক পুনর্বিন্যাস করা শিখি। উদাহরণ হিসেবে নিচের আচরণটি বাস্তবায়ন করি:

প্রথমে আমাদের ব্লকগুলোর HTML কোড লিখি:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
</div>

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

.parent {
	display: flex;
	width: 90%;
	margin: 50px auto;
	border: 1px solid red;
}

এখন ব্লকগুলোর নিজস্ব স্টাইল লিখি, যেসব বৈশিষ্ট্য মিডিয়া কুয়েরি দ্বারা পরিবর্তিত হবে সেগুলো উল্লেখ না করে:

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

বড় স্ক্রিন প্রস্থে ব্লকগুলোর মধ্যকার ফাঁক স্বয়ংক্রিয়ভাবে গণনা করা হোক:

@media (min-width: 500px) {
	.parent {
		justify-content: space-between;
	}
}

আমাদের ব্লকগুলোর প্রস্থ 50%-এর সামান্য কম রাখি, যাতে ফাঁকা জায়গা থাকে:

@media (min-width: 500px) {
	.child {
		width: 49.5%;
	}
}

ছোট স্ক্রিন প্রস্থে আমাদের ব্লকগুলোকে কলামে সাজাই:

@media (max-width: 500px) {
	.parent {
		flex-direction: column;
	}
}

তাদের নিচের মার্জিন নির্ধারণ করি:

@media (max-width: 500px) {
	.child {
		margin-bottom: 10px;
	}
}

সব একত্রিত করে নিচের কোডটি পাই:

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

@media (max-width: 500px) {
	.parent {
		flex-direction: column;
	}
	.child {
		margin-bottom: 10px;
	}
}
@media (min-width: 500px) {
	.parent {
		justify-content: space-between;
	}
	.child {
		width: 49.5%;
	}
}

নিচের উদাহরণটি পুনরাবৃত্তি করুন: