গ্রিড / টাইল ভিউ কিভাবে তৈরি করবেন?

Question

উদাহরণস্বরূপ, আমার কিছু ক্লাস .আর্টিকেল রয়েছে এবং আমি এই শ্রেণিটিকে গ্রিড ভিউ হিসাবে দেখতে চাই। সুতরাং আমি এই স্টাইলটি প্রয়োগ করেছি:

.article{
  width:100px;
  height:100px;
  background:#333;
  float:left;
  margin:5px;
}

এই স্টাইলটি .আর্টিকেলকে টাইল / গ্রিড দেখায়। এটি নির্দিষ্ট উচ্চতা সহ সূক্ষ্ম কাজ করে। তবে আমি যদি উচ্চতায় অটোকে সেট করতে চাই (তার মধ্যে থাকা ডেটা অনুসারে স্বয়ংক্রিয়ভাবে প্রসারিত), গ্রিডটি দেখতে অদ্ভুত।

এবং আমি এই মতটি তৈরি করতে চাই:

Answer 1

এই ধরণের লেআউটটিকে রাজমিস্ত্রি বিন্যাস বলা হয় । রাজমিস্ত্রি হ'ল একটি গ্রিড লেআউট তবে এটি উপাদানগুলির পার্থক্যের উচ্চতার কারণে হোয়াইটস্পেস পূরণ করবে।

রাজমিস্ত্রি বিন্যাস তৈরির জন্য jQuery রাজমিস্ত্রি একটি jQuery প্লাগইন।

বিকল্পভাবে, আপনি CSS3 columnগুলি ব্যবহার করতে পারেন । CSS3 কলামের সাথে সামঞ্জস্যতার সমস্যা হওয়ায় এখনকার জন্য jQuery ভিত্তিক প্লাগইন সেরা পছন্দ।

Comments

থাকার জন্য এখানে CSS3-উপায় যুক্ত করা হয়েছে !

— বেহরদখোদায়ার

Answer 2

আপনি ফ্লেক্সবক্স ব্যবহার করতে পারেন।

1. আপনার উপাদানগুলিকে একটি বহুমুখী কলাম ফ্লেক্স ধারক মধ্যে রাখুন

   #flex-container {
     display: flex;
     flex-flow: column wrap;
   }

2. উপাদানগুলিকে পুনঃক্রম করুন যাতে DOM ক্রমটি উলম্বের পরিবর্তে অনুভূমিকভাবে সম্মানিত হয়। উদাহরণস্বরূপ, আপনি যদি 3 টি কলাম চান,

   #flex-container > :nth-child(3n + 1) { order: 1; } /* 1st column */
   #flex-container > :nth-child(3n + 2) { order: 2; } /* 2nd column */
   #flex-container > :nth-child(3n + 3) { order: 3; } /* 3rd column */

3. প্রতিটি কলামের প্রথম আইটেমের আগে একটি কলাম বিরতিতে বাধ্য করুন:

   #flex-container > :nth-child(-n + 3) {
     page-break-before: always; /* CSS 2.1 syntax */
     break-before: always;  /* New syntax */
   }

   দুঃখের বিষয়, সমস্ত ব্রাউজারগুলি এখনও ফ্লেক্সবক্সে লাইন বিরতি সমর্থন করে না। যদিও এটি ফায়ারফক্সে কাজ করে।

#flex-container {
  display: flex;
  flex-flow: column wrap;
}

#flex-container > :nth-child(3n + 1) { order: 1; } /* 1st column */
#flex-container > :nth-child(3n + 2) { order: 2; } /* 2nd column */
#flex-container > :nth-child(3n + 3) { order: 3; } /* 3rd column */

#flex-container > :nth-child(-n + 3) {
  page-break-before: always; /* CSS 2.1 syntax */
  break-before: always;  /* New syntax */
}

/* The following is optional */
#flex-container > div {
  background: #666;
  color: #fff;
  margin: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36px;
}
#flex-container > :nth-child(1) { height: 100px; }
#flex-container > :nth-child(2) { height: 50px; }
#flex-container > :nth-child(3) { height: 75px; }
#flex-container > :nth-child(4) { height: 50px; }
#flex-container > :nth-child(5) { height: 100px; }
#flex-container > :nth-child(6) { height: 50px; }
#flex-container > :nth-child(7) { height: 100px; }
#flex-container > :nth-child(8) { height: 75px; }
#flex-container > :nth-child(9) { height: 125px; }

<div id="flex-container">
  <div>1</div><div>2</div><div>3</div>
  <div>4</div><div>5</div><div>6</div>
  <div>7</div><div>8</div><div>9</div>
</div>

Comments

বাহ, এটি একটি পুরানো প্রশ্ন ছিল। এবং রাজমিস্ত্রির বিন্যাস অনুকরণ করতে ফ্লেক্সবক্স ব্যবহার করা সেরা বিকল্প নয়। আপনার স্নিপেটটি উপায় দ্বারা কাজ করছে না: ডি, আমি মনে করি আপনি এখানে পয়েন্টটি মিস করেছেন। এই সমস্যাটি সমাধান করার জন্য অন্যান্য কাজটি CSS3 কলাম ব্যবহার করে। তবে, উত্তরের জন্য ধন্যবাদ

— আরিওনা রিয়ান

@ আরিওনারিয়ান ফায়ারফক্সে স্নিপেট ব্যবহার করে দেখুন, অন্যান্য ব্রাউজারগুলি জোর করে রেখা বিরতি এখনও সমর্থন করে না। এবং হ্যাঁ, সিএসএস কলামগুলি খুব কার্যকর হতে পারে তবে ফ্লেক্সবক্সের বিপরীতে যা লেআউটটির চেয়ে পাঠ্যের জন্য আরও নকশাকৃত মনে হয়।

— ওরিওল

হ্যাঁ, এটাই সমস্যা :), এই কারণেই এখন পর্যন্ত আমরা এই ধরণের ডিজাইনের প্রকরণের জন্য রাজমিস্ত্রি / আইসোটোপ প্লাগইনকে আটকে আছি।

— অ্যারিয়ানা রিয়ান

শুধু প্রদর্শন প্রদর্শন: ফ্লেক্স; ফ্লেক্স-মোড়ানো: মোড়ানো; (এবং আরও কিছু নয়), এবং এটি ক্রোম, ফায়ারফক্স, সাফারি, উইন 11 এবং উইন 7-এ আই 11 এ সঠিকভাবে কাজ করে। ন্যূনতম উচ্চতার সাথে সতর্ক থাকুন, যদিও ( ক্যানিউজ.com/#search=flex - wrap দেখুন )

— এলবিজে

@ এলবিজে তবে তারপরে উপাদানগুলি সারিগুলিতে সাজানো হয়। এটি এখানে পছন্দসই আচরণ নয়

— ওরিওল

Answer 3

এখন যে CSS3 বিস্তৃতভাবে উপলব্ধ এবং প্রধান ব্রাউজারগুলির মাধ্যমে সামঞ্জস্যপূর্ণ, এসও এর স্নিপেট সরঞ্জাম দিয়ে সজ্জিত খাঁটি সমাধানের জন্য এটি সময়:

---

তৈরি করার জন্য গাঁথনি সিএসএস 3 ব্যবহার বিন্যাস column-countসহ column-gapযথেষ্ট হবে। তবে আমিও ব্যবহার করেছিmedia-queries এটিকে প্রতিক্রিয়াশীল করার ।

বাস্তবায়নে ডুব দেওয়ার আগে দয়া করে বিবেচনা করুন যে লিগ্যাসি ব্রাউজারের জন্য আপনার কোডটি সামঞ্জস্যপূর্ণ করার জন্য একটি jQuery রাজমিস্ত্রি গ্রন্থাগার ফ্যালব্যাক যুক্ত করা আরও নিরাপদ হবে specially

<!--[if lte IE 9]>
    <script src="/path/to/js/masonry.pkgd.min.js"></script>
<![endif]-->

এখানে আমরা যাচ্ছি:

.masonry-brick {
    color: #FFF;
    background-color: #FF00D8;
    display: inline-block;
    padding: 5px;
    width: 100%;
    margin: 1em 0; /* for separating masonry-bricks vertically*/
}

@media only screen and (min-width: 480px) {
    .masonry-container {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 768px) {
    .masonry-container {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

@media only screen and (min-width: 960px) {
    .masonry-container {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }
}

<div class="masonry-container">
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
</div>

Comments

রাজমিস্ত্রি এবং পাত্রে আইটেমগুলির মধ্যে সমান স্থান কীভাবে রাখবেন জানেন?

— ইনক্রিটর

এটি ভাল তবে প্রচুর লোকের জন্য, অর্ডার দেওয়ার একটি প্রয়োজনীয়তা রয়েছে masonry bricks। কলামটি নীচে থেকে উপরে জিনিসগুলি অর্ডার করে, প্রশ্নটি অনুভূমিকভাবে স্যুইচ করার জন্য নয়, অনুভূমিকভাবে একই থাকার আদেশটি চেয়েছিল was উদাহরণস্বরূপ, উপরের সংক্ষিপ্ততম ব্লকটি তৃতীয় কলামে থাকা উচিত তবে উপরের সারিতে।

— jscul

Answer 4

কেবল সিএসএস সহ এটি সমাধান করার সর্বোত্তম বিকল্পটি হ'ল CSS কলাম-কাউন্টির সম্পত্তি ব্যবহার করা।

 .content-box {
   border: 10px solid #000000;
   column-count: 3;
 }

আরও তথ্যের জন্য এটি পরীক্ষা করুন: https://developer.mozilla.org/en/docs/Web/CSS/column-count

Answer 5

আপনি প্রদর্শন: গ্রিড ব্যবহার করতে পারেন

উদাহরণ স্বরূপ:

এটি 7 টি কলাম সহ একটি গ্রিড এবং আপনার সারিগুলির স্বয়ংক্রিয় আকার রয়েছে।

.myGrid{
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-auto-rows: auto;
      grid-gap: 10px;
      justify-items: center;
}

আরও তথ্যের জন্য নিম্নলিখিত লিঙ্কটি প্রবেশ করুন: https://css-tricks.com/snippets/css/complete-guide-grid/

Answer 6

সঙ্গে CSS এর গ্রিড মডিউল আপনি একটি তৈরি করতে পারেন চমত্কার অনুরূপ বিন্যাস।

কোডপেন ডেমো

1) তিনটি নির্দিষ্ট-প্রস্থের গ্রিড কলাম সেট করুন

ul {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  ...
}

2) বড় উচ্চতার স্প্যান 2 সারি বিশিষ্ট আইটেমগুলি নিশ্চিত করুন

li:nth-child(1),
li:nth-child(3),
li:nth-child(5),
li:nth-child(8),
li:nth-child(9),
li:nth-child(10),
li:nth-child(12)
{
  grid-row: span 2;
}

body {
  margin: 0;
}
ul {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  grid-gap: 1rem;
  justify-content: center;
  align-items: center;
  
  /* boring properties: */
  list-style: none;
  width: 90vw;
  height: 85vh;
  margin: 4vh auto;
  border: 5px solid green;
  padding: 1rem;
  overflow: auto;
  counter-reset: item;
}
li {
  position: relative;
}
li:after {
  content: counter(item);
  counter-increment: item;
  position: absolute;
  padding: 0.3rem;
  background: salmon;
  color: white;
  left:0;
  top:0;
}
img {
  outline: 5px solid salmon;
}
li:nth-child(1),
li:nth-child(3),
li:nth-child(5),
li:nth-child(8),
li:nth-child(9),
li:nth-child(10),
li:nth-child(12)
{
  grid-row: span 2;
}

<ul>
  <li><img src="http://lorempixel.com/150/150/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/50/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/140/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/80/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/220/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/120/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/70/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/200/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/230/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/240/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/130/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/160/animals" alt="" /></li>
</ul>

কোডপেন ডেমো

সমস্যা:

• আইটেমগুলির মধ্যে ফাঁকগুলি অভিন্ন হবে না
• 2 বা ততোধিক সারি বিস্তৃত করতে আপনাকে বড় / উচ্চ আইটেমগুলি ম্যানুয়ালি সেট করতে হবে
• সীমিত ব্রাউজার সমর্থন :)

Answer 7

এবং যদি আপনি রাজমিস্ত্রির চেয়ে আরও বেশি এগিয়ে যেতে চান তবে আইসোটোপ ব্যবহার করুন http://isotope.metafzy.co/ এটি রাজমিস্ত্রির অগ্রণী সংস্করণ (একই লেখকের তৈরি) এটি খাঁটি সিএসএস নয়, এটি জাভাস্ক্রিপ্টের সাহায্য ব্যবহার করে তবে এটি খুব জনপ্রিয়, সুতরাং আপনি প্রচুর পরিমাণে ডক্স পাবেন

যদি আপনি এটি খুব জটিল মনে করেন তবে অনেকগুলি প্রিমিয়াম প্লাগইন রয়েছে যা ইতিমধ্যে আইসোটোপের উপর তাদের বিকাশের উপর ভিত্তি করে, উদাহরণস্বরূপ মিডিয়া বাক্সগুলি http://codecanyon.net/item/media-boxes-responsive-jquery-grid/5683020

Answer 8

সেখানে এক গ্রিড-ভিত্তিক উদাহরণ।

.grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
  grid-auto-flow: dense;
  padding: 10px;
}

.grid-layout .item {
  padding: 15px;
  color: #fff;
  background-color: #444;
}

.span-2 {
  grid-column-end: span 2;
  grid-row-end: span 2;
}

.span-3 {
  grid-column-end: span 3;
  grid-row-end: span 4;
}

<div class="grid-layout">
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-3">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-2">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-3">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-2">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
</div>

রাচেল অ্যান্ড্রু এফটিডব্লিউ দ্বারা রচিত এই কোড-পেনের ভিত্তিতে