Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

CSS Grid Repeat Pattern Issue

Tags:

html

css

css-grid

Trying to achieve the repeating patterns like the one in the image below using css grid:

enter image description here

Tried using the CSS grid , see the code pen

.parent {
  display: grid;
  grid-gap: 20px;
  direction: rtl;
  padding-bottom: 20px;
}

.item--img-cont img {
  width: 100%;
}

.item--text-cont {
  color: white;
}

.item {
  background: black;
}


/*START:Desktop Style */

@media screen and (min-width:1280px) {
  .parent {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .item:nth-child(10n+1) {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
  }
  .item:nth-child(10n+10) {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 3;
    grid-row-end: 5;
  }
}


/*END:Desktop Style */
<!--START:  Set 1-->
<div class="parent">
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-1" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-2" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-3" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-4" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-5" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->



  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-1" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-2" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-3" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-4" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-5" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->



  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-1" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-2" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-3" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-4" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-5" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->



  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-1" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-2" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-3" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-4" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-5" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->


</div>
<!--END:  Set 1-->

I am not able to achieve the pattern than the first one.

It is working only when I give the hardcoded value for grid-row-start property.

Note: Don't change the DOM structure. Thanks in advance for any help.

like image 303
Mohamed Hussain Avatar asked Jun 20 '17 13:06

Mohamed Hussain

People also ask

How do you use repeat repeat in CSS?

repeat() Jump to: The repeat() CSS function represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern to be written in a more compact form. This function can be used in the CSS Grid properties grid-template-columns and grid-template-rows.

What is repeat () in a grid-template?

Repeat () is a notation that you can use with the grid-template-columns and grid-template-rows properties to make your rules more concise and easier to understand when creating a large amount of columns or rows. For example, let’s say we have this definition for a grid container: We can use the repeat () notation like this instead to simplify:

What is CSS grid layout?

Grid Layout The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

Can I use repeat with named grid lines?

You can also use repeat with named lines: Named grid lines at the end of repeat notations end up sharing the same line as the next starting name line. For examples, with this:

2 Answers

Without changing the DOM structure, some hard-coding will be necessary because of the way grid items are positioned automatically:

  • grid-auto-flow: row (default)
  • grid-auto-flow: column

You may want to consider adding a class to each item that needs larger sizing. That will make targeting them much simpler and easier.

In the example below, the sizing issue is complete. You just need to decide how to position each item.

Again, if you can re-structure the HTML, maybe you could place each set of 10 items into one grid container, and repeat that block.

.parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
  direction: rtl;
  padding-bottom: 20px;
}

.item.Box-1:nth-child(odd) {
  grid-column: 1 / span 2;
  grid-row-end: span 2;
}

.item.Box-5:nth-child(even) {
  grid-column: 3 / span 2;
  grid-row-end: span 2;
}

.item--img-cont img {
  width: 100%;
}

.item--text-cont {
  color: white;
}

.item {
  background: black;
}
<!--START:  Set 1-->
<div class="parent">
  <!--START:  Item-->
  <div class="item Box-1">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-1" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-2" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-3" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-4" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item Box-5">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-5" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->



  <!--START:  Item-->
  <div class="item Box-1">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-1" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-2" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-3" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-4" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item Box-5">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-5" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item Box-1">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-1" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-2" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-3" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-4" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item Box-5">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-5" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item Box-1">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-1" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-2" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-3" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-4" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item Box-5">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-5" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
</div>
<!--END:  Set 1-->

jsFiddle demo

like image 98
Michael Benjamin Avatar answered Oct 02 '22 19:10

Michael Benjamin

Using a little bit of a trick, I have achieved your desired layout on a basic HTML.

I have changed the color of the critical items so that they are easier to track

.grid {
  width: 200px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: 50px;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  grid-auto-flow: dense;
  transform: rotateY(180deg);
}

.cell {
  background: tomato;
  width: 100%;
  height: 100%;
  transform: rotateY(180deg);
}

.cell:nth-child(10n + 1) {
  background: lightgreen;
  grid-column: span 2;
  grid-row: span 2;

}

.cell:nth-child(10n + 10) {
  background: lightblue;
  grid-column: span 2;
  grid-row: span 2;

}

.cell:nth-child(10n + 8) {
  background: yellowgreen;
  grid-column: 1;
}

.cell:nth-child(10n + 9) {
  background: yellow;
  grid-column: 2;
}
<div class="grid">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>
  <div class="cell">7</div>
  <div class="cell">8</div>
  <div class="cell">9</div>
  <div class="cell">10</div>
  <div class="cell">11</div>
  <div class="cell">12</div>
  <div class="cell">13</div>
  <div class="cell">14</div>
  <div class="cell">15</div>
  <div class="cell">16</div>
  <div class="cell">17</div>
  <div class="cell">18</div>
  <div class="cell">19</div>
  <div class="cell">20</div>
  <div class="cell">21</div>
  <div class="cell">22</div>
  <div class="cell">23</div>
</div>

Now, the same layout without the trick (but using more rules)

.grid {
  width: 200px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: 50px;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  grid-auto-flow: dense;
}

.cell {
  background: tomato;
  width: 100%;
  height: 100%;
}

.cell:nth-child(10n + 1) {
  background: lightgreen;
  grid-column: 3 / 5;  /* strange behaviour */
  grid-row: span 2;
}

.cell:nth-child(10n + 2),
.cell:nth-child(10n + 4) {
  background: papayawhip;
  grid-column: 2;

}

.cell:nth-child(10n + 6),
.cell:nth-child(10n + 8) {
  background: yellowgreen;
  grid-column: 4;
}

.cell:nth-child(10n + 7),
.cell:nth-child(10n + 9) {
  background: yellow;
  grid-column: 3;
}

.cell:nth-child(10n + 10) {
  background: lightblue;
  grid-column: 1 / 3;    /* strange behaviour */
  grid-row: span 2;

}
<div class="grid">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>
  <div class="cell">7</div>
  <div class="cell">8</div>
  <div class="cell">9</div>
  <div class="cell">10</div>
  <div class="cell">11</div>
  <div class="cell">12</div>
  <div class="cell">13</div>
  <div class="cell">14</div>
  <div class="cell">15</div>
  <div class="cell">16</div>
  <div class="cell">17</div>
  <div class="cell">18</div>
  <div class="cell">19</div>
  <div class="cell">20</div>
  <div class="cell">21</div>
  <div class="cell">22</div>
  <div class="cell">23</div>
</div>
like image 40
vals Avatar answered Oct 02 '22 17:10

vals
Sign in to Comment

Related questions

Fit image into auto-sized flex child
Make image take full height of flex item
How to use multiple index pages in angularjs
How do you get an indentation after ::before pseudo element?
Toggling hover on dropdown between mobile and desktop
Prevent Render Blocking CSS
FLEXBOX: auto height for div to vertically fill out parent
How can I see the baseline of an HTML element?
HTML datetime-local change event?
Flexbox: shrink image to fit
createImageBitmap alternative on Safari
jQuery select data attributes with common keyword
Augmenting SVG tag with Shadow DOM
In Angular2 ngModel value not updating on onBlur event of custom directive
Sticky footer not working correctly with sidebar
Maximum possible size image and div expanding to fill the space
Chrome not updating styles when last-child changes
Fix and Scrollable table structure using html div
How do I use icons from Flaticon in my html?
Vue.js not working with Semantic UI dropdown

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!