정적 그리드 시스템

그리드 시스템은 미리 정의된 스타일시트로 같은 격자 위에 요소를 배치할 수 있게 하는 것을 의미합니다. 이때 정의된 스타일 자체를 그리드 시스템이라고 부르기도 합니다.

<style>
        .container{
            width:  960px;
            margin: 0 auto;
        }
        .row{
            overflow: hidden;
        }
        .span1, .span2, .span3, .span4, .span5, 
        .span6, .span7, .span8, .span9, .span10,
        .span11,.span12{
            float: left;
        }
        
        .span1{width: 60px}
        .span2{width: 140px}
        .span3{width: 220px}
        .span4{width: 300px}
        .span5{width: 380px}
        .span6{width: 460px}
        .span7{width: 540px}
        .span8{width: 620px}
        .span9{width: 700px}
        .span10{width: 780px}
        .span11{width: 860px}
        .span12{width: 940px}
    </style>

동적 그리드 시스템

CSS3 그리드 레이아웃

css3에서는 레이아웃을 구성할 때 사용할 수 있는 전용 속성을 추가했습니다. 바로 Flex속성과 Grid 속성입니다. 😢하지만 Flex 속성과 Grid 속성은 모든 인터넷 익스플로러 버전에서 사용 불가능하거나 불완전하게 지원합니다. 그래도 앞으로 사용될 가능성이 높으므로, 어떤 느낌인지 살펴보도록 합시다.

❗️일단 CSS3 그리드 레이아웃을 사용하려면, 다른 요소를 감싸는 태그에 display:grid를 적용합니다.

<style>
  .container{
  	display:grid
  }
</style>

그리드 나누기

이전에 정적 그리드 시스템을 살펴보며 Column-width 화 Gutter-width 에 대해 알아보았는데 Column-width 대신 grid-template-columns 속성으로 지정합니다.

<style>
  .container{
            display: grid;
            grid-template-columns: 200px 200px; /*세로로 200픽셀씩 자릅니다*/
        }
</style>

❗️grid-template-columns 속성에는 fr단위라는 것을 사용할 수 있습니다. 이는 비율을 나타내는 단위입니다. grid-template-columns 속성에 지정된 fr단위의 합을 기반으로 비율을 지정한다고 생각하면 됩니다.

만약 2:1로 나누고 싶다면, 다음과 같이 입력합니다.

<style> 
        .container{
            display: grid;
            grid-template-columns: 2fr 1fr;
        }
</style>

일부 요소의 크기를 픽셀 단위 등으로 고정할 수도 있습니다.

<style>
  .container{
            display: grid;
            grid-template-columns: 300px 1fr;
        }
</style>

CSS3의 그리드 시스템에는 grid-template-rows라는 속성도 있습니다. 이는 가로로 자를 때 사용합니다. 만약 다음과 같은 코드를 사용한다면 가로로 나뉜 그리드의 높이가 1:2 비율로 지정됩니다.

<style>
     .container{
            display: grid;
            grid-template-columns: 300px 300px;
            grid-template-rows: 1fr 2fr;
        }
</style>

🤔단축형태

코드는 아래와 같이 짧게 작성할 수도 있습니다. 순서는 /입니다. 처음 보면 나눗셈으로 잘못 해석해버리는 경우가 있으므로, 기억해두는 것이 좋습니다.

<style>
grid-template: 1fr 2fr/ 300px 100px; 
</style>

참고적으로 grid-gap 속성으로 GutterWidth도 지정할 수 있습니다.

<style>
grid-gap: 5px; /*GapWidth를 5픽셀로 지정합니다.*/
</style>

셀 배치하기

그리드 위에 배치되는 요소를 "셀" 이라고 합니다.

<style>
/*행으로 1번부터 4번까지 차지합니다.*/
  grid-row-start: 1;
  grid-row-end: 4;

/*열로 1번부터 3번까지 차지합니다.*/
  grid-column-start: 1;
  grid-column-end: 3;         
</style>

CSS3 그리드 시스템은 다음과 같은 과정을 거쳐 요소를 배치한다고 생각하면 쉽습니다.

1. grid-template-columns, grid-template-rows 속성으로 그리드를 나눕니다.
2. grid-column-start, grid-column-end, grid-row-start, grid-row-end 속성이 적용된 요소의 크기를 지정한다.
3. 나머지 요소를 차례차례 배치하다.

🤔단축 형태

<style>

  /*행으로 1번부터 4번까지 차지합니다.*/
   grid-row-start: 1;
   grid-row-end: 4; 

	/*열로 1번부터 3번까지 차지합니다.*/
	 grid-column-start: 1;
   grid-column-end: 3;  
          
   /*위 코드와 아래 코드는 동일하다*/
    grid-row: 1/4;
   grid-column: 1/3;
</style>