카드형 레이아웃 만들기 - PC버전

가로 5, 세로 4의 카드형 레이아웃

: alticle을 만든 후

가로 20%, 높이 25%를 적용하여 5X4 스타일의 레이아웃을 만들어줍니다.

<div class="container">
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
</div>

$b : #000;

.container {
    height: calc(100vh - 50px);
    background: rgb(238, 238, 238);
    article {
        width: 20%; height: 25%;
        float: left; overflow: hidden;
        background: $b;
        &:nth-child(1) {
            background: rgba($b, 0.1);
        }
        &:nth-child(2) {
            background: rgba($b, 0.15);
        }
        &:nth-child(3) {
            background: rgba($b, 0.2);
        }
        &:nth-child(4) {
            background: rgba($b, 0.25);
        }
        &:nth-child(5) {
            background: rgba($b, 0.3);
        }
        &:nth-child(6) {
            background: rgba($b, 0.35);
        }
        &:nth-child(7) {
            background: rgba($b, 0.4);
        }
        &:nth-child(8) {
            background: rgba($b, 0.45);
        }
        &:nth-child(9) {
            background: rgba($b, 0.5);
        }
        &:nth-child(10) {
            background: rgba($b, 0.55);
        }
        &:nth-child(11) {
            background: rgba($b, 0.6);
        }
        &:nth-child(12) {
            background: rgba($b, 0.65);
        }
    }
}

 

---

 가로-세로 값을 변수로 계산하기 

'$'를 사용하여 가로 20%, 세로 25%를 변수로 지정해주고

원하는 크기의 카드를 수식으로 구성하여줍니다.

 

    $w : 20%;
    $h : 25%;
    article {
        width: $w; height: $h;
        float: left; overflow: hidden;
        background: $b;
        &:nth-child(1) {
            width: $w * 3; height: $h*2;
            background: rgba($b, 0.1);
        }
        &:nth-child(2) {
            width: $w * 2; height: $h*1;
            background: rgba($b, 0.15);
        }
        &:nth-child(3) {
            background: rgba($b, 0.2);
        }
        &:nth-child(4) {
            background: rgba($b, 0.25);
        }
        &:nth-child(5) {
            background: rgba($b, 0.3);
        }
        &:nth-child(6) {
            background: rgba($b, 0.35);
        }
        &:nth-child(7) {
            width: $w * 2; height: $h*1;
            background: rgba($b, 0.4);
        }
        &:nth-child(8) {
            background: rgba($b, 0.45);
        }
        &:nth-child(9) {
            width: $w * 2; height: $h*1;
            background: rgba($b, 0.5);
        }
        &:nth-child(10) {
            background: rgba($b, 0.55);
        }
        &:nth-child(11) {
            background: rgba($b, 0.6);
        }
        &:nth-child(12) {
            background: rgba($b, 0.65);
        }
    }