• 회원가입
  • 로그인

[grid] CSS - Grid Intro - 그리드 소개

grid 예제 - 3열

 

<style>

 

.grid-container {

  display: grid;

  grid-template-columns: auto auto auto;

  background-color: red;

  padding: 10px;

}

.grid-item {

  background-color: rgba(255, 255, 255, 0.8);

  border: 1px solid rgba(0, 0, 0, 0.8);

  padding: 20px;

  font-size: 30px;

  text-align: center;

}

</style>


<div class="grid-container">

  <div class="grid-item">1</div>

  <div class="grid-item">2</div>

  <div class="grid-item">3</div>  

  <div class="grid-item">4</div>

  <div class="grid-item">5</div>

  <div class="grid-item">6</div>  

  <div class="grid-item">7</div>

  <div class="grid-item">8</div>

  <div class="grid-item">9</div>  

</div>

 

결과보기 

 

grid 정의 

 

전체 가로 너비를 컬럼의 개수에 의해 자동 배분해 레이아웃 결정.

 


 1. 그리드 선언 : 컨테이너에  display:grid  (또는, display:inline-grid)

 

.grid-container {

  display: grid;

}

 

또는,

 

.grid-container {

  display: inline-grid;

}

 


2. 세로열・가로줄 구분

 

grid column (컬럼) : 세로열

grid row (로우) : 가로줄

 


3. 컬럼 개수

 

grid-template-columns (그리드템플릿컬럼즈) : 각 컬럼별 너비 설정.

(예) grid-template-columns: auto auto auto;

 


4. 컬럼 간격 ・ 로우 간격

 

grid-gap (그리드갭) : (세로열 간 간격・가로줄 간 간격) 일괄 정의. 

(예) grid-gap: 50px 100px; // grid-row-gap: 50px; grid-column-gap:100px;

 

grid-column-gap (그리드컬럼갭) : 세로열 간 간격 

(예) grid-column-gap: 50px;

 

grid-row-gap (그리드로우갭) : 가로줄 간 간격 

(예) grid-row-gap: 50px;

 


5. 아이템의 컬럼 차지 개수 (※ 컬럼 시작선과 종료선으로 설정)

 

grid-column 속성 : grid-column-start , grid-column-end 일괄 선언

(예) grid-column : 1/3;

 

grid-column-start 속성 : 컬럼 시작선. (= 아이템의 컬럼 차지 시작선)

(예) grid-column-start: 1;  

 

grid-column-end 속성 : 컬럼 종료선. (= 아이템의 컬럼 차지 종료선)

(예0 grid-column-end: 3;

 


5. 아이템의 로우 차지 개수 (※ 로우 시작선과 종료선으로 설정)

 

grid-row 속성 : grid-row-start , grid-row-end 일괄 선언

(예) grid-row : 1/3;

 

grid-row-start 속성 : 로우 시작선. (= 아이템의 로우 차지 시작선)

(예) grid-row-start: 1;  

 

grid-row-end 속성 : 로우 종료선. (= 아이템의 로우 차지 종료선)

(예) grid-row-end: 3;

 


6. 아이템 높이 자동 설정.

 

grid-auto-rows : 로우 높이 자동 설정.

(예) grid-auto-rows: minmax(200px, auto);

 

 

 

PS. 

 

1분 코딩 님 - (flex + grid) 강의

https://youtu.be/eprXmC_j9A4

 

모질라 - grid 강의

https://developer.mozilla.org/en-US/docs/Web/CSS/grid

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012