কিভাবে তৈরি করা যায়: প্রতিক্রিয় ছবি গ্রিড

প্রতিক্রিয় ছবি গ্রিড কিভাবে তৈরি করা যায়:

ছবি গ্রিড তৈরি করুন

প্রথম পদক্ষেপ - এইচটিএমএল যোগ করুন:

<div class="row">
  <div class="column">
    <img src="wedding.jpg">
    <img src="rocks.jpg">
    <img src="falls2.jpg">
    <img src="paris.jpg">
    <img src="nature.jpg">
    <img src="mist.jpg">
    <img src="paris.jpg">
  </div>
  <div class="column">
    <img src="underwater.jpg">
    <img src="ocean.jpg">
    <img src="wedding.jpg">
    <img src="mountainskies.jpg">
    <img src="rocks.jpg">
    <img src="underwater.jpg">
  </div>
  <div class="column">
    <img src="wedding.jpg">
    <img src="rocks.jpg">
    <img src="falls2.jpg">
    <img src="paris.jpg">
    <img src="nature.jpg">
    <img src="mist.jpg">
    <img src="paris.jpg">
  </div>
  <div class="column">
    <img src="underwater.jpg">
    <img src="ocean.jpg">
    <img src="wedding.jpg">
    <img src="mountainskies.jpg">
    <img src="rocks.jpg">
    <img src="underwater.jpg">
  </div>
</div>

দ্বিতীয় পদক্ষেপ - সিএসএস যোগ করুন:

সিএসএস ফ্লেক্সবক্স দ্বারা প্রতিক্রিয় সাজুকা তৈরি করুন:

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}
/* চারটি সমানভাবে পাশাপাশি স্তম্ভ তৈরি করুন */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}
.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}
/* প্রতিক্রিয় সাজুকা - দুইটি স্তম্ভ ব্যবস্থা তৈরি করুন, না চারটি স্তম্ভ */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}
/* প্রতিক্রিয় সাজুকা - দুই স্তম্ভকে পাশাপাশি বসানোর পরিবর্তে একসাথে স্তম্ভ করা */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

亲自试一试

相关页面

教程：সিএসএস ফ্লেক্সবক্স

教程：如何创建图像网格