আপনি কেবল CSS এর সাহায্যে উল্লম্ব এবং অনুভূমিক কেন্দ্রিক সামগ্রী সহ স্কোয়ারগুলির প্রতিক্রিয়াশীল গ্রিড তৈরি করতে পারেন । আমি কীভাবে এক ধাপে ধাপে প্রক্রিয়াটি ব্যাখ্যা করব তবে প্রথমে আপনি কী অর্জন করতে পারবেন তার 2 টি ডেমো এখানে রয়েছে:
এখন আসুন কিভাবে এই অভিনব প্রতিক্রিয়াশীল স্কোয়ারগুলি তৈরি করবেন!
1. প্রতিক্রিয়াশীল স্কোয়ার তৈরি:
উপাদানগুলি বর্গক্ষেত্র রাখার কৌশল (বা অন্য যে কোনও দিকের অনুপাত) শতাংশ ব্যবহার করা padding-bottom।
পার্শ্ব নোট: আপনি উপরের প্যাডিং খুব বেশি বা শীর্ষ / নীচের মার্জিন ব্যবহার করতে পারেন তবে উপাদানটির পটভূমি প্রদর্শিত হবে না।
যেহেতু শীর্ষ প্যাডিং প্যারেন্ট উপাদানগুলির প্রস্থ অনুসারে গণনা করা হয় ( রেফারেন্সের জন্য MDN দেখুন ), উপাদানটির উচ্চতা তার প্রস্থ অনুসারে পরিবর্তিত হবে। আপনি এখন এর প্রস্থ অনুপাতটিকে এর প্রস্থ অনুসারে রাখতে পারেন ।
এই মুহুর্তে আপনি কোড করতে পারেন:
এইচটিএমএল :
<div></div>
সিএসএস
div {
width: 30%;
padding-bottom: 30%; /* = width for a square aspect ratio */
}
উপরের কোডটি ব্যবহার করে এখানে 3 * 3 স্কোয়ার গ্রিডের একটি সহজ লেআউট উদাহরণ ।
এই কৌশলটি দিয়ে আপনি অন্য যে কোনও দিক অনুপাত তৈরি করতে পারেন, এখানে একটি টেবিলটি অনুপাত অনুপাত এবং 30% প্রস্থ অনুসারে নীচে প্যাডিংয়ের মান প্রদান করে।
Aspect ratio | padding-bottom | for 30% width
------------------------------------------------
1:1 | = width | 30%
1:2 | width x 2 | 60%
2:1 | width x 0.5 | 15%
4:3 | width x 0.75 | 22.5%
16:9 | width x 0.5625 | 16.875%
২. স্কোয়ারের ভিতরে সামগ্রী যুক্ত করা
যেহেতু আপনি সরাসরি স্কোয়ারের মধ্যে সামগ্রী যুক্ত করতে পারবেন না (এটি তাদের উচ্চতা প্রসারিত করবে এবং স্কোয়ারগুলি আর স্কোয়ার হবে না) আপনার তাদের ভিতরে শিশু উপাদান তৈরি করতে হবে (উদাহরণস্বরূপ আমি ডিভগুলি ব্যবহার করছি) position: absolute;এবং সামগ্রীটি তাদের ভিতরে রেখে দিতে হবে । এটি সামগ্রী প্রবাহের বাইরে নিয়ে যাবে এবং স্কোয়ারের আকার রাখবে।
position:relative;প্যারেন্ট ডিভগুলি যুক্ত করতে ভুলবেন না যাতে পরম বাচ্চাদের তাদের পিতামাতার তুলনায় তুলনামূলকভাবে আকার / আকার দেওয়া হয়।
আসুন আমাদের বর্গের 3x3 গ্রিডে কিছু সামগ্রী যুক্ত করুন:
এইচটিএমএল :
<div class="square">
<div class="content">
.. CONTENT HERE ..
</div>
</div>
... and so on 9 times for 9 squares ...
সিএসএস :
.square {
float:left;
position: relative;
width: 30%;
padding-bottom: 30%; /* = width for a 1:1 aspect ratio */
margin:1.66%;
overflow:hidden;
}
.content {
position:absolute;
height:80%; /* = 100% - 2*10% padding */
width:90%; /* = 100% - 2*5% padding */
padding: 10% 5%;
}
ফলাফল <- কিছু সুন্দর করার জন্য কিছু ফর্ম্যাটিং সহ!
3. বিষয়বস্তু কেন্দ্র করে
অনুভূমিকভাবে:
এটি বেশ সহজ, আপনার কেবল যোগ text-align:centerকরতে হবে .content।
ফলাফল
উল্লম্ব প্রান্তিককরণ
এটি মারাত্মক হয়ে যায়! কৌশলটি ব্যবহার করা হয় to
display:table;
/* and */
display:table-cell;
vertical-align:middle;
কিন্তু আমরা ব্যবহার করতে পারবেন না display:table;উপর .squareবা .contentআছে divs কারণ এটি সাথে সংঘাত position:absolute;তাই আমরা ভিতরে দুটি সন্তান তৈরি করা প্রয়োজন .contentআছে divs। আমাদের কোড অনুসরণ হিসাবে আপডেট করা হবে:
এইচটিএমএল :
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell">
... CONTENT HERE ...
</div>
</div>
</div>
</div>
... and so on 9 times for 9 squares ...
সিএসএস:
.square {
float:left;
position: relative;
width: 30%;
padding-bottom : 30%; /* = width for a 1:1 aspect ratio */
margin:1.66%;
overflow:hidden;
}
.content {
position:absolute;
height:80%; /* = 100% - 2*10% padding */
width:90%; /* = 100% - 2*5% padding */
padding: 10% 5%;
}
.table{
display:table;
height:100%;
width:100%;
}
.table-cell{
display:table-cell;
vertical-align:middle;
height:100%;
width:100%;
}
আমরা এখন শেষ করেছি এবং আমরা ফলাফলটি এখানে দেখতে পারি:
এখানে সম্পাদনাযোগ্য মজার
