parang diyaryo lang ang concept na yan. Kung meron ka dyan diyaryo (Bulletin or Inquirer) tignan mo.
- sa loob na mga pages, pansinin mo ang:
1) COLUMN. Meron silang uniformity sa width ng column. Meron 1 column, makitid. Merong 2 colums, 3 colums etc. etc. Yung text nag-o-occupy siya minsan ng 2 colums, iba naman 1 column. Yung Title ng storya, buong 4 columns ino-occupy niya. Minsan buong 8 or 9 columns. Yung Picture, 2 columns, 3 columns, or buong 9 columns.
2) SPACE between Columns (gutter yata tawag sa diyaryo) - pansinin mo rin very uniform ang space na yan. Usually iisa lang ang width na yan sa buong diyaryo.
With that in mind, ganyan din ang CONCEPT ng CSS Grid. Kailangan mo lang idagdag yung ROW (basically, paano nagi-stack yung mga elements gaya ng PHOTO, Caption, Story Title, Text ng Story).
Sa analogy ng Diyaryo, meron Column + Row STRUCTURE na sinusunod... ganon din sa CSS Grid, meron COLUMN at ROW na sinusunod para madaling mag layout.
Ibig sabihin puwede kang gumawa ng sarili mong CSS GRID SYSTEM. Halimbawa, sa project mo, gusto mo 6-colum grid system... o kaya 12-column grid system (Example: Bootstrap)....meron pa nga 16-column grid system at saka 24. Whatever number of column na balak mong gamitin, you need to know the MAXIMUM width (parang diyaryo, meron maiksi na diyaryo gaya ng Abante, etc... meron din mas malalaking diyaryo gaya ng Bulletin or inquirer)....in CSS Grid, meron din MAXIMUM WIDTH na ide-decide mo.... 960 pixels ba....1200pixels.. 1900pixels..... then the column number (6 column, 7 8 9 12 14 16 24 columns, etc. etc)
SUMMARY:
Grid System = components are Column + Row + Maximum Width in pixels. Ginagamit para maging structure na susundin sa layouting. It's customizable. Kahit sino puwedeng gumawa ng sariling Grid System. etc etc.
= Katulong para madaling mag layout ng website, mas mabilis gumawa ng website, mas madaling gumawa ng RESPONSIVE layouts (mapa desktop, mobile or tablet, maganda pa rin tignan ang website).