How to offset items in a 4x4 grid using sass loop?

mathias5 0
Viewed 23

I'm trying to create a 4 by 4 grid in css using this loop, but with little luck. The div named "holder" is 100% width and height. I want its children to all be 25% height and 25% width. How would you do that using this approach?

html

  <div class="holder">
    <figure data-partial="1">1</figure>
    <figure data-partial="2">2</figure>
    <figure data-partial="3">3</figure>
    <figure data-partial="4">4</figure>
    <figure data-partial="5">5</figure>
    <figure data-partial="6">6</figure>
    <figure data-partial="7">7</figure>
    <figure data-partial="8">8</figure>
    <figure data-partial="9">9</figure>
    <figure data-partial="10">10</figure>
    <figure data-partial="11">11</figure>
    <figure data-partial="12">12</figure>
  </div>

sass/scss

  figure {
    width: 25%;
    height: 25%;
    top: 0;
    position: absolute;
    border: 1px solid #000000;
  }
  @for $i from 1 through 12 {
    figure[data-partial="#{$i}"] {
      width: ?;
      height: ?;
    }
  }
sass css
1 Answers

grid seems to be what you need:

example if holder is laid on the window

  • 4x3 (your HTML)

* {
  margin: 0;
}

html,
body,
.holder {
  /* size your holder the way you want or already have */
  height: 100%;
}

.holder {
  /* what you basicly need for 12 children 4x3 */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
/* show*/
figure {
  border: solid;
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="holder">
  <figure data-partial="1">1</figure>
  <figure data-partial="2">2</figure>
  <figure data-partial="3">3</figure>
  <figure data-partial="4">4</figure>
  <figure data-partial="5">5</figure>
  <figure data-partial="6">6</figure>
  <figure data-partial="7">7</figure>
  <figure data-partial="8">8</figure>
  <figure data-partial="9">9</figure>
  <figure data-partial="10">10</figure>
  <figure data-partial="11">11</figure>
  <figure data-partial="12">12</figure>
</div>

  • 4x4

* {
  margin: 0;
}

html,
body,
.holder {
  /* size your holder the way you want or already have */
  height: 100%;
}

.holder {
  /* what you basicly need for 16 children 4x4 */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
}


/* show*/

figure {
  border: solid;
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="holder">
  <figure data-partial="1">1</figure>
  <figure data-partial="2">2</figure>
  <figure data-partial="3">3</figure>
  <figure data-partial="4">4</figure>
  <figure data-partial="5">5</figure>
  <figure data-partial="6">6</figure>
  <figure data-partial="7">7</figure>
  <figure data-partial="8">8</figure>
  <figure data-partial="9">9</figure>
  <figure data-partial="10">10</figure>
  <figure data-partial="11">11</figure>
  <figure data-partial="12">12</figure>
  <figure data-partial="13">13</figure>
  <figure data-partial="14">14</figure>
  <figure data-partial="15">15</figure>
  <figure data-partial="16">16</figure>
</div>

ressources:

G-Cyrillus0
Related