92. Creating Our First Grid

아래와 같이 $ 달러를 작성하면 $가 자동으로 1, 2, 3, 4, 5 ,6 순서대로 숫자를 작성해준다.

.container>.item.item--$

 

<div class="container">
  <div class="item item--1"></div>
  <div class="item item--2"></div>
  <div class="item item--3"></div>
  <div class="item item--4"></div>
  <div class="item item--5"></div>
  <div class="item item--6"></div>
</div>

 

 

아래와 같이 사용해 봤는데

grid-gap -> gap
grid-row-gap -> row-gap
grid-column-gap -> column-gap

이제는 위의 기능의 이름이 변경되었다고 한다.

flex 박스로 복잡하게 만드는 것보다 간단하게 구현할 수 있다.

 

.container {
  background-color: #eee;
  width: 1000px;
  margin: 30px auto;
  
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 200px 200px;
//  grid-row-gap: 20px;
// grid-column-gap: 20px;
  grid-gap: 30px;
}

.item {
  border: 1px solid black;
  padding: 20px;
  font-size: 30px;
  font-family: sans-serif;
  color: #fff;
  
  &--1 {
    background-color: orange;
  }
    &--2 {
      background-color: green;
  }
    &--3 {
          background-color: violet;
  }
    &--4 {
          background-color: pink;
  }
    &--5 {
          background-color: blue;
  }
    &--6 {
          background-color: brown;
  }
}