Grid System
lastmod 2025-02-28created 2025-02-286 edits
In "Grid System", "Grid" means a lattice or checkerboard-like pattern of lines, and generally refers to a surface divided vertically and horizontally.
The grid system, which came into widespread use from the mid-1970s, is a means of giving rules to a design's layout.
It started in editorial design (print) and is now also applied to web development; using a grid system at the basic stage of building a web page makes production easy and fast.
Pros
When all measurements in a design layout follow the same rules, you automatically get a more consistent UI. A grid system uses uniform elements and spacing to bring consistency across platforms, environments, and screen sizes, and helps arrange graphic elements systematically. It also helps establish internal standards for collaboration, makes handling resolutions easier in responsive design, and becomes an easy communication system between designers and developers.
Grid system in web design
Basic elements of a grid system:
- Column
- Gutter
- Margin
It consists of these three elements.
Grid system in Material Design
Google's Material Design does not officially provide a CSS framework, but its guidelines define a grid system under the name "Layout Grid".
Features:
- Gutters and margins in 8px units.
- Recommends a 12-column system.
- Responsive breakpoints (mobile, tablet, desktop).
Material Design's grid system is similar to Bootstrap, but focuses more on visual style (shadows, colors, spacing).
The names Container, Row, and Col are widely used terms inspired by Bootstrap, and have naturally settled into a de facto standard in the community.
CSS implementation: sample
- Container: centers the content, sets a maximum width (max-width), and adds left and right padding.
- Row: a container that lays out elements horizontally, using Flexbox to align columns (Col) horizontally.
- Col: a column inside a Row, whose width is set as a ratio (e.g. a 12-column grid system) or defined as a fixed size.
HTML structure:
<div class="container">
<div class="row">
<div class="col col-4">Column 1</div>
<div class="col col-4">Column 2</div>
<div class="col col-4">Column 3</div>
</div>
<div class="row">
<div class="col col-6">Column 1</div>
<div class="col col-6">Column 2</div>
</div>
</div>
CSS code:
/* Container */
.container {
max-width: 1200px; /* Material Design의 일반적인 최대 너비 */
margin: 0 auto; /* 중앙 정렬 */
padding: 16px; /* 좌우 패딩 (Material Design의 기본 간격 단위: 8px의 배수) */
}
/* Row */
.row {
display: flex; /* Flexbox로 가로 배치 */
flex-wrap: wrap; /* 화면 크기에 따라 줄바꿈 허용 */
margin: 0 -8px; /* 열 사이의 간격을 위한 네거티브 마진 */
}
/* Column */
.col {
padding: 8px; /* 열 내부 패딩 */
box-sizing: border-box; /* 패딩과 보더를 너비에 포함 */
}
/* 12단 그리드 시스템 기반 열 너비 */
.col-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
.col-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
.col-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.col-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
/* 반응형 디자인을 위한 미디어 쿼리 */
@media (max-width: 600px) {
.col-4, .col-6, .col-12 {
flex: 0 0 100%; /* 작은 화면에서는 열이 100% 너비로 */
max-width: 100%;
}
}
/* Material Design 스타일 추가 */
.col {
background-color: #fff; /* 기본 배경색 */
border-radius: 4px; /* 둥근 모서리 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
}
Implementing breakpoints
A breakpoint is a concept used in responsive web design (Responsive Web Design), meaning a specific point at which the layout or style must change depending on the screen size (mainly width). It is needed to provide the best experience when users view a website on various devices such as desktops, tablets, and mobile.
- Example: change the style so that columns stack vertically instead of horizontally when the screen width is 600px or less.
- Use: usually implemented with CSS media queries (Media Query), and you can follow the breakpoints recommended by guidelines such as Material Design.
Material Design suggests the following breakpoints per device:
- Mobile: 0px ~ 599px
- Tablet: 600px ~ 959px
- Desktop: 960px and above
If you need breakpoints, you can implement them as follows:
/* Breakpoint: 모바일 (600px 이하) */
@media (max-width: 600px) {
.col-4 {
flex: 0 0 100%; /* 열이 풀 너비로 */
max-width: 100%;
}
}
/* Breakpoint: 태블릿 (600px ~ 959px) */
@media (min-width: 601px) and (max-width: 959px) {
.col-4 {
flex: 0 0 50%; /* 열이 2개씩 배치 */
max-width: 50%;
}
}
/* Breakpoint: 데스크톱 (960px 이상) */
@media (min-width: 960px) {
.col-4 {
flex: 0 0 33.3333%; /* 기본 3열 유지 */
max-width: 33.3333%;
}
}