%에서 그리드 레이아웃을 알아내는 것이 어려움

Question

사람들이 사용해온이 그리드 시스템을 이해하려고 노력해 왔습니다. 때때로 나는 종류가 바보 같다고 느끼게한다.

마진이없는 12 그리드 시스템을 사용하는 것으로 알고 있습니다. 해당 열 12는 100 %이고 1 열은 약 8.33333 %입니다.

나는 그리드 시스템과 onepcss 그리드를보고 있었고 조금 혼란 스럽다. 그/그녀가 전폭 그리드가 99 %라고 말하고 있기 때문에 1 %가 남았습니다. 그들은 3 %의 마진을 사용하지만 5.5 %의 경우 하나의 열을 사용합니다. 그러나 100/12 = 8.33333 % - 3 % (마진에 대해) = 5.3333 %

아래 예제를 게시했습니다. 하나의 열이 무엇인지 잘못 이해하고 있는지를 파악하기 위해 기본 수학을 사용하려고합니까?

.col1 { width: 5.5%; } 
.col2 { width: 14%; } 
.col3 { width: 22.5%; } 
.col4 { width: 31%; } 
.col5 { width: 39.5%; } 
.col6 { width: 48%; } 
.col7 { width: 56.5%; } 
.col8 { width: 65%; } 
.col9 { width: 73.5%; } 
.col10 { width: 82%; } 
.col11 { width: 90.5%; } 
.col12 { width: 99%; margin: 0; } 

Answer 1

12 열 그리드에는 11 개의 거터가 있습니다. 따라서 거터 폭 (33 %)은 전체 너비 (99 %)에서 빼야합니다. 각 홈통이 3 % 인 경우, 하나의 컬럼은 :

(99-33)/12 = 5.5

그리고, 여러 열은 열이 가산되어 플러스 제본들은 "흡수". 그래서 세 열은 다음과 같습니다

5.5 + 5.5 + 5.5 + 3 + 3 = 22.5

시각 (세 개의 열 너비를 더한 두 개의 제본 폭) :

┌─────── 22.5 ────────┐ 
| 5.5 |3| 5.5 |3| 5.5 |3| 5.5 |3| 5.5 |3| 5.5 |3| 5.5 |3| 5.5 |3| 5.5 |3| 5.5 |3| 5.5 |3| 5.5