약장이나 기구 트레이와 같다. 칸을 먼저 만들어 두면 무엇을 넣거나 빼도 나머지가 밀리지 않는다. 칸 없이 늘어놓으면 하나 넣을 때마다 전부 움직인다. 아래 두 그림이 그 차이다. 점선 상자 하나하나가 슬롯이다(설명하려고 그린 것이고, 실제 화면에는 안 보인다).
| 슬롯 | 무엇이 들어가나 | 폭 |
|---|---|---|
lead | 앞 아이콘, 상태 점, 체크박스 | 24px 고정 |
label | 항목 이름 | 남는 공간을 전부 |
value | 값, 입력칸, 드롭다운, 칩 | 내용만큼, 오른쪽에 붙음 |
trail | 뒤 버튼, 스위치, 화살표 | 내용만큼 |
내용이 없는 슬롯은 지우지 말고 빈 채로 둔다. 그게 자리를 지키는 방법이다.
실측. 행 네 개에 아이콘과 버튼을 하나씩 추가해 재봤다. 빈 슬롯을 생략하면 라벨 시작 위치가 32px까지 벌어졌다. 빈 슬롯을 명시하자 편차가 0이 됐다. 다른 건 아무것도 바꾸지 않았다.
카탈로그에 "행은 슬롯이다"라고 적혀는 있지만, 슬롯을 생략해도 CSS가 막지 않는다. 그래서 새 요소를 넣을 때 ①번처럼 깨질 수 있다. 이걸 CSS가 강제하게 만드는 것이 다음 수정 제안이다. 함께 제안한 정렬 규칙 일곱 가지는 규칙 문서에 있다.