Web Maker

Grid Generator

CSS에서 Grid는 웹 개발에 있어서 flexbox 와 더불어 레이아웃을 구성하는 데 사용되는 대표적이 기술이다. 특히 그리드 시스템은 요소들을 수평과 수직으로 정렬하고 배치하는 방법을 제공하고 불필요한 코드를 줄이는데도 효과적인 표현 방법을 제공한다.

Gird는 colum(행)과 row(열)의 구조로 이루어져 있으며, 그리드 컨테이너와 그리드 아이템으로 구성된다. 그리드 컨테이너는 그리드 시스템을 정의하고, 그리드 아이템은 컨테이너 내에서 실제로 배치되는 요소들을 나타낸다. 

.box {
  display: grid;
  grid-template-columns:  1fr 1fr 1fr;
  grid-template-rows:  1fr 1fr 1fr;
  gap: 2px 2px;
}

Grid의 특징

유연한 레이아웃: Gird(그리드)를 사용하면 요소들을 효과적으로 정렬하고 배치할 수 있다. 다양한 디바이스와 화면 크기에 대응하기 위해 유연한 레이아웃이 필요한 경우 그리드를 사용할 수 있기때문에 반응형 화면 디자인에 유리하다.

복잡한 레이아웃 제작: Gird(그리드)는 복잡한 레이아웃을 만드는 데 특히 유용하다. 다양한 열과 행의 크기를 지정하여 복잡한 그리드 패턴을 만들어 반복적으로 표현하는데 유리하다.

정렬과 위치 조정: Gird(그리드)를 사용하면 요소들을 수평과 수직으로 정렬하고 위치를 조정하는데 유리하다. 이를 통해 레이아웃의 구조를 쉽고 간단히 변경할 수 있다.