Grid - 1

ecch74·2023년 5월 31일

부모요소 속성
display : grid

사용 예시

grid-template-columns : auto auto;
grid-template-columns : repeat(2, auto);
grid-template-rows : 100px 200px;
grid : 100px 200px / auto auto auto;
grid-column-gap : 30px;
grid-row-gap : 60px;
grid-gap : 10px 60px;

자녀요소 속성

index.html

<body>
  <div class="parent">
    <div>1</div>
    <div>2</div>
  </div>
</body>

style.css

.parent {
  border: 5px solid #555;
  background-color: #eee;
  width: 900px;
  height: 200px;
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-items: center;
  align-items: center;
}
.parent div {
  background-color: palevioletred;
  width: 100px;
  height: 100px;
  text-align: center;
}
.parent div:nth-child(1) {
  justify-self: start;
}
.parent div:nth-child(2) {
  justify-self: end;
  align-self: end;
}

이다미

Front-End Developer

Grid - 1

사용 예시

0개의 댓글