Likidong layout: mga prinsipyo ng pagbuo at pagkakaiba sa adaptibo

Ano ang likidong layout

Likidong layout (liquid layout, fluid layout) — isang paraan ng pagko-coding kung saan ang mga sukat ng elemento ay itinatakda sa relatibong yunit, hindi sa nakapirming pixel. Ito ay nagpapahintulot sa pahina na lumaki kasabay ng window ng browser nang walang pahalang na pag-scroll.

Ang konsepto ng elastikong pagko-coding ay lumitaw noong panahon ng mga desktop monitor na may iba’t ibang resolusyon. Noong 2000s, ang mga website na may nakapirming lapad na 960 pixel ay mukhang pangit sa 15-inch at 30-inch na monitor. Nilutas ng likidong layout ang problemang ito.

Ayon sa Web Almanac (2024), 78% ng mga modernong website ay gumagamit ng mga elemento ng elastikong pagko-coding sa pamamagitan ng relatibong yunit. Ang mga purong likidong layout ay mas bihira — pangunahin sa mga dashboard at panel ng administrasyon.

Konteksto ng kasaysayan

Elastikong pagko-coding ay naging tanyag pagkatapos ng publikasyon ng artikulo ni John Allsopp na «A Dao of Web Design» noong 2000, kung saan nanawagan siya na iwanan ang nakapirming pixel pabor sa relatibong yunit. Ang manifestong ito ay naglatag ng pilosopikal na pundasyon para sa buong responsive design.

Mga relatibong yunit ng pagsukat: porsyento, vw, vh

Mga pangunahing relatibong yunit sa CSS ay nahahati sa dalawang grupo: kaugnay sa parent element (porsyento) at kaugnay sa viewport (vw, vh, vmin, vmax). Bawat grupo ay lumulutas ng sarili nitong mga gawain sa elastikong pagko-coding.

/* Percent — width relative to parent */
.sidebar {
    width: 30%;
}

.content {
    width: 70%;
}

/* vw/vh — viewport-based units */
.hero-section {
    width: 100vw;
    height: 80vh;
}

.fullscreen-modal {
    width: 90vmin;
}

Porsyento ay kinakalkula kaugnay sa lapad ng parent container. Ang nested na porsyento ay maaaring lumikha ng cascade calculations na minsan ay nagbibigay ng hindi inaasahang resulta. Mga yunit ng vw/vh ay nakatali sa viewport at hindi pinapansin ang parent container — ito ay maginhawa para sa full-screen na mga seksyon.

Yunit ng rem para sa mga font

Sa elastikong pagko-coding, mahalaga hindi lamang itakda ang lapad ng mga bloke sa relatibong yunit, kundi pati na rin ang laki ng font. Ang yunit na rem (root em) ay nagtatali ng laki ng teksto sa root element ng HTML. Sa pamamagitan ng pagbabago ng font-size sa html, ang lahat ng teksto sa pahina ay maaaring i-scale.

/* Global text scaling via rem */
html {
    font-size: 62.5%; /* 1rem = 10px */
}

.heading {
    font-size: 2.4rem; /* = 24px */
}

.body-text {
    font-size: 1.6rem; /* = 16px */
}

Likido vs adaptibong layout

Ang pangunahing pagkakaiba sa pagitan ng likido at adaptibong layout ay ang katangian ng pagbabago ng lapad. Ang likidong layout ay patuloy na nagbabago sa bawat pagbabago ng window, habang ang adaptibo — discretely sa pamamagitan ng media queries.

Likidong layout — patuloy na pag-scale, adaptibo — paglipat sa pagitan ng nakapirming layout. Bawat paraan ay may kalakasan at kahinaan.

Sa praktika karamihan ng mga modernong website ay gumagamit ng hybrid approach: isang elastikong grid na may relatibong yunit + media queries para sa kritikal na breakpoint. Ang purong elastikong pagko-coding na walang media queries ay maaaring magmukhang hindi maayos sa napakalawak o napakakitid na screen.

Paano ipatupad ang elastikong pagko-coding sa CSS

Ang pangunahing implementasyon ng likidong layout ay may tatlong bahagi: relatibong yunit ng lapad, maximum/minimum na limitasyon, at flexbox o grid para sa pamamahagi ng espasyo.

/* Fluid grid with Flexbox */
.container {
    display: flex;
    flex-wrap: wrap;
}

.card {
    flex: 1 1 30%;
    min-width: 250px;
}

/* Fluid grid with CSS Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

Flexbox approach na may flex: 1 1 30% ay gumagawa ng mga card na sumasakop ng humigit-kumulang 30% ng lapad ng container, ngunit maaaring sumikip hanggang 250px. Kapag maraming card, lumilipat ang mga ito sa susunod na row. Grid approach na may auto-fit at minmax ay awtomatikong gumagawa ng mga column na kasya sa container.

Mga limitasyon: min-width at max-width

Ang pangunahing problema ng purong elastikong pagko-coding — sa napakalawak na screen, ang linya ng teksto ay humahaba hanggang 2000+ pixel, na ginagawang imposible ang pagbasa. Para sa solusyon, ginagamit ang CSS properties na min-width, max-width.

/* Container limits for readability */
.content-wrapper {
    width: 90%;
    max-width: 1200px;
    min-width: 320px;
    margin: 0 auto;
}

max-width: 1200px ay pumipigil sa pag-unat ng nilalaman sa ultra-wide monitor. min-width: 320px ay ginagarantiyahan ang pinakamababang lapad ng container sa maliliit na screen. Ang kombinasyon ng width: 90% + max-width ay lumilikha ng elastikong container na may kisame — ang pinakasikat na pattern sa modernong web design.

Ayon sa HTTP Archive (2025), 92% ng mga site sa top-1000 ay gumagamit ng max-width para sa mga content block. Ang karaniwang halaga para sa desktop layout ay 1140–1200 pixel.

Hibrid na paraan: likido + adaptibo

Ang modernong web design ay bihirang gumamit ng purong likido o purong adaptibong paraan. Ang hybrid na pamamaraan ay pinagsasama ang mga bentahe ng pareho: isang elastikong grid sa relatibong yunit + media queries para sa pandaigdigang restruktura.

/* Hybrid: fluid base + media query */
.layout {
    display: grid;
    grid-template-columns: 1fr 3fr;
}

@media (max-width: 768px) {
    .layout {
        grid-template-columns: 1fr;
    }
}

Sa desktop ang layout ay gumagamit ng elastikong column na 1fr at 3fr — ang proporsyon ay nananatili sa anumang lapad ng window. Sa mobile ang media query ay lumilipat sa isang solong-column na scheme, kung saan ang mga column ay inilalagay nang patayo.

Ang bentahe ng hybrid approach — ang developer ay nagsusulat ng mas kaunting media queries, dahil ang elastikong grid ay awtomatikong umaangkop sa mga intermediate na laki. Ang media queries ay kailangan lamang para sa kritikal na pagbabago ng istruktura, hindi para sa bawat hakbang ng lapad ng screen.