{"id":27627,"date":"2025-04-28T11:05:49","date_gmt":"2025-04-28T04:05:49","guid":{"rendered":"https:\/\/interdata.vn\/blog\/?p=27627"},"modified":"2025-04-28T11:05:49","modified_gmt":"2025-04-28T04:05:49","slug":"css-grid-layout-la-gi","status":"publish","type":"post","link":"https:\/\/interdata.vn\/blog\/css-grid-layout-la-gi\/","title":{"rendered":"CSS Grid Layout l\u00e0 g\u00ec? Gi\u1ea3i th\u00edch &#038; V\u00ed d\u1ee5 c\u01a1 b\u1ea3n (2025)"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-white ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">N\u1ed8I DUNG<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/interdata.vn\/blog\/css-grid-layout-la-gi\/#CSS-Grid-Layout-la-gi\" >CSS Grid Layout l\u00e0 g\u00ec?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/interdata.vn\/blog\/css-grid-layout-la-gi\/#Tai-sao-nen-su-dung-CSS-Grid\" >T\u1ea1i sao n\u00ean s\u1eed d\u1ee5ng CSS Grid?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/interdata.vn\/blog\/css-grid-layout-la-gi\/#Cac-khai-niem-cot-loi-cua-CSS-Grid\" >C\u00e1c kh\u00e1i ni\u1ec7m c\u1ed1t l\u00f5i c\u1ee7a CSS Grid<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/interdata.vn\/blog\/css-grid-layout-la-gi\/#Grid-Container-va-Grid-Item\" >Grid Container v\u00e0 Grid Item<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/interdata.vn\/blog\/css-grid-layout-la-gi\/#Grid-Lines-Duong-ke-luoi\" >Grid Lines (\u0110\u01b0\u1eddng k\u1ebb l\u01b0\u1edbi)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/interdata.vn\/blog\/css-grid-layout-la-gi\/#Grid-Tracks-Ranh-luoi-%E2%80%93-Hang-va-Cot\" >Grid Tracks (R\u00e3nh l\u01b0\u1edbi &#8211; H\u00e0ng v\u00e0 C\u1ed9t)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/interdata.vn\/blog\/css-grid-layout-la-gi\/#Grid-Cell-O-luoi\" >Grid Cell (\u00d4 l\u01b0\u1edbi)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/interdata.vn\/blog\/css-grid-layout-la-gi\/#Grid-Area-Vung-luoi\" >Grid Area (V\u00f9ng l\u01b0\u1edbi)<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/interdata.vn\/blog\/css-grid-layout-la-gi\/#Huong-dan-su-dung-CSS-Grid-co-ban-qua-vi-du\" >H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng CSS Grid c\u01a1 b\u1ea3n qua v\u00ed d\u1ee5<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/interdata.vn\/blog\/css-grid-layout-la-gi\/#Buoc-1-Tao-Grid-Container\" >B\u01b0\u1edbc 1: T\u1ea1o Grid Container<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/interdata.vn\/blog\/css-grid-layout-la-gi\/#Buoc-2-Dat-cac-Grid-Item-vao-luoi\" >B\u01b0\u1edbc 2: \u0110\u1eb7t c\u00e1c Grid Item v\u00e0o l\u01b0\u1edbi<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/interdata.vn\/blog\/css-grid-layout-la-gi\/#Buoc-3-Tao-khoang-cach-giua-cac-o-Gaps\" >B\u01b0\u1edbc 3: T\u1ea1o kho\u1ea3ng c\u00e1ch gi\u1eefa c\u00e1c \u00f4 (Gaps)<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/interdata.vn\/blog\/css-grid-layout-la-gi\/#So-sanh-CSS-Grid-va-Flexbox-Khi-nao-dung-cai-nao\" >So s\u00e1nh CSS Grid v\u00e0 Flexbox: Khi n\u00e0o d\u00f9ng c\u00e1i n\u00e0o?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/interdata.vn\/blog\/css-grid-layout-la-gi\/#Diem-khac-biet-chinh\" >\u0110i\u1ec3m kh\u00e1c bi\u1ec7t ch\u00ednh<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/interdata.vn\/blog\/css-grid-layout-la-gi\/#Truong-hop-nen-dung-CSS-Grid\" >Tr\u01b0\u1eddng h\u1ee3p n\u00ean d\u00f9ng CSS Grid<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/interdata.vn\/blog\/css-grid-layout-la-gi\/#Truong-hop-nen-dung-CSS-Flexbox\" >Tr\u01b0\u1eddng h\u1ee3p n\u00ean d\u00f9ng CSS Flexbox<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/interdata.vn\/blog\/css-grid-layout-la-gi\/#Kha-nang-ho-tro-cua-trinh-duyet\" >Kh\u1ea3 n\u0103ng h\u1ed7 tr\u1ee3 c\u1ee7a tr\u00ecnh duy\u1ec7t<\/a><\/li><\/ul><\/nav><\/div>\n\n<p>B\u1ea1n \u0111ang b\u1eaft \u0111\u1ea7u h\u00e0nh tr\u00ecnh <a href=\"https:\/\/interdata.vn\/blog\/lap-trinh-la-gi\/\">l\u1eadp tr\u00ecnh<\/a> <a href=\"https:\/\/interdata.vn\/blog\/front-end-la-gi\/\">front-end<\/a> v\u00e0 c\u1ea3m th\u1ea5y b\u1ed1i r\u1ed1i tr\u01b0\u1edbc vi\u1ec7c s\u1eafp x\u1ebfp b\u1ed1 c\u1ee5c (layout) trang web? <a href=\"https:\/\/interdata.vn\/blog\/css-la-gi\/\">CSS<\/a> Grid Layout ch\u00ednh l\u00e0 m\u1ed9t trong nh\u1eefng c\u00f4ng c\u1ee5 m\u1ea1nh m\u1ebd nh\u1ea5t b\u1ea1n c\u1ea7n n\u1eafm v\u1eefng. B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u1ea3i th\u00edch c\u1eb7n k\u1ebd CSS Grid Layout l\u00e0 g\u00ec, c\u00e1ch n\u00f3 ho\u1ea1t \u0111\u1ed9ng, c\u00e1c kh\u00e1i ni\u1ec7m c\u1ed1t l\u00f5i, cung c\u1ea5p v\u00ed d\u1ee5 tr\u1ef1c quan v\u00e0 so s\u00e1nh v\u1edbi Flexbox, gi\u00fap b\u1ea1n t\u1ef1 tin s\u1eed d\u1ee5ng n\u00f3 trong c\u00e1c d\u1ef1 \u00e1n th\u1ef1c t\u1ebf.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"CSS-Grid-Layout-la-gi\"><\/span>CSS Grid Layout l\u00e0 g\u00ec?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a href=\"https:\/\/interdata.vn\/blog\/css-grid-layout-la-gi\/\">CSS Grid Layout (hay g\u1ecdn l\u00e0 CSS Grid)<\/a> l\u00e0 m\u1ed9t h\u1ec7 th\u1ed1ng layout m\u1ea1nh m\u1ebd trong b\u1ed9 quy t\u1eafc CSS (Cascading Style Sheets). N\u00f3 \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf \u0111\u1eb7c bi\u1ec7t \u0111\u1ec3 gi\u00fap b\u1ea1n x\u00e2y d\u1ef1ng b\u1ed1 c\u1ee5c trang web ph\u1ee9c t\u1ea1p d\u1ef1a tr\u00ean m\u1ed9t l\u01b0\u1edbi hai chi\u1ec1u, bao g\u1ed3m c\u1ea3 h\u00e0ng (rows) v\u00e0 c\u1ed9t (columns).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2025\/04\/CSS-grid-layout.jpg\" alt=\"CSS grid layout\" width=\"750\" height=\"500\" class=\"aligncenter size-full wp-image-27639\" title=\"\" srcset=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2025\/04\/CSS-grid-layout.jpg 750w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2025\/04\/CSS-grid-layout-300x200.jpg 300w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/p>\n<p>M\u1ee5c \u0111\u00edch ch\u00ednh c\u1ee7a CSS Grid l\u00e0 gi\u1ea3i quy\u1ebft nh\u1eefng th\u00e1ch th\u1ee9c trong vi\u1ec7c d\u00e0n trang m\u00e0 c\u00e1c ph\u01b0\u01a1ng ph\u00e1p c\u0169 h\u01a1n (nh\u01b0 d\u00f9ng float hay position) kh\u00f3 th\u1ef1c hi\u1ec7n hi\u1ec7u qu\u1ea3. N\u00f3 cung c\u1ea5p m\u1ed9t c\u00e1ch ti\u1ebfp c\u1eadn hi\u1ec7n \u0111\u1ea1i \u0111\u1ec3 s\u1eafp x\u1ebfp c\u00e1c ph\u1ea7n t\u1eed giao di\u1ec7n theo c\u1ea3 chi\u1ec1u ngang v\u00e0 chi\u1ec1u d\u1ecdc c\u00f9ng l\u00fac.<\/p>\n<p>V\u1ec1 c\u01a1 b\u1ea3n, CSS Grid ho\u1ea1t \u0111\u1ed9ng b\u1eb1ng c\u00e1ch chia v\u00f9ng kh\u00f4ng gian b\u1ea1n ch\u1ec9 \u0111\u1ecbnh th\u00e0nh m\u1ed9t m\u1ea1ng l\u01b0\u1edbi. M\u1ea1ng l\u01b0\u1edbi n\u00e0y \u0111\u01b0\u1ee3c t\u1ea1o th\u00e0nh t\u1eeb c\u00e1c \u0111\u01b0\u1eddng k\u1ebb ngang v\u00e0 d\u1ecdc (g\u1ecdi l\u00e0 grid lines), t\u1eeb \u0111\u00f3 h\u00ecnh th\u00e0nh c\u00e1c h\u00e0ng, c\u1ed9t v\u00e0 \u00f4 (grid cells) n\u01a1i b\u1ea1n \u0111\u1eb7t n\u1ed9i dung.<\/p>\n<p>L\u00e0 m\u1ed9t module ch\u00ednh th\u1ee9c c\u1ee7a CSS, CSS Grid th\u01b0\u1eddng \u0111\u01b0\u1ee3c so s\u00e1nh v\u1edbi m\u1ed9t c\u00f4ng c\u1ee5 layout kh\u00e1c l\u00e0 CSS Flexbox. Kh\u00e1c bi\u1ec7t c\u1ed1t l\u00f5i l\u00e0 Grid \u0111\u01b0\u1ee3c t\u1ed1i \u01b0u cho vi\u1ec7c t\u1ea1o layout hai chi\u1ec1u, trong khi Flexbox ch\u1ee7 y\u1ebfu t\u1eadp trung v\u00e0o vi\u1ec7c s\u1eafp x\u1ebfp c\u00e1c m\u1ee5c theo m\u1ed9t chi\u1ec1u (h\u00e0ng ho\u1eb7c c\u1ed9t).<\/p>\n<p>S\u1eed d\u1ee5ng CSS Grid mang l\u1ea1i l\u1ee3i th\u1ebf l\u1edbn trong vi\u1ec7c x\u1eed l\u00fd c\u00e1c b\u1ed1 c\u1ee5c ph\u1ee9c t\u1ea1p m\u1ed9t c\u00e1ch tr\u1ef1c quan, ch\u00ednh x\u00e1c v\u00e0 th\u01b0\u1eddng c\u1ea7n \u00edt code h\u01a1n. N\u00f3 \u0111\u1eb7c bi\u1ec7t h\u1eefu \u00edch cho vi\u1ec7c x\u00e2y d\u1ef1ng layout t\u1ed5ng th\u1ec3 trang v\u00e0 h\u1ed7 tr\u1ee3 m\u1ea1nh m\u1ebd cho thi\u1ebft k\u1ebf \u0111\u00e1p \u1ee9ng (responsive web design).<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Tai-sao-nen-su-dung-CSS-Grid\"><\/span>T\u1ea1i sao n\u00ean s\u1eed d\u1ee5ng CSS Grid?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>V\u1eady c\u1ee5 th\u1ec3, <strong>l\u00fd do b\u1ea1n n\u00ean h\u1ecdc v\u00e0 s\u1eed d\u1ee5ng CSS Grid<\/strong> l\u00e0 g\u00ec? N\u00f3 mang l\u1ea1i nhi\u1ec1u l\u1ee3i \u00edch thi\u1ebft th\u1ef1c, \u0111\u1eb7c bi\u1ec7t khi b\u1ea1n \u0111\u1ed1i m\u1eb7t v\u1edbi c\u00e1c y\u00eau c\u1ea7u layout ph\u1ee9c t\u1ea1p trong c\u00e1c d\u1ef1 \u00e1n web hi\u1ec7n \u0111\u1ea1i. H\u00e3y c\u00f9ng \u0111i\u1ec3m qua nh\u1eefng \u01b0u \u0111i\u1ec3m n\u1ed5i b\u1eadt nh\u1ea5t c\u1ee7a h\u1ec7 th\u1ed1ng l\u01b0\u1edbi CSS n\u00e0y.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2025\/04\/CSS-grid-layout-01.jpg\" alt=\"CSS grid layout 01\" width=\"750\" height=\"430\" class=\"aligncenter size-full wp-image-27636\" title=\"\" srcset=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2025\/04\/CSS-grid-layout-01.jpg 750w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2025\/04\/CSS-grid-layout-01-300x172.jpg 300w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/p>\n<p>Tr\u01b0\u1edbc h\u1ebft, CSS Grid <strong>\u0111\u01a1n gi\u1ea3n h\u00f3a vi\u1ec7c t\u1ea1o layout ph\u1ee9c t\u1ea1p<\/strong>. C\u00e1c ph\u01b0\u01a1ng ph\u00e1p c\u0169 th\u01b0\u1eddng \u0111\u00f2i h\u1ecfi nhi\u1ec1u th\u1ee7 thu\u1eadt CSS (hacks), th\u1ebb <a href=\"https:\/\/interdata.vn\/blog\/html-la-gi\/\">HTML<\/a> l\u1ed3ng nhau kh\u00f4ng c\u1ea7n thi\u1ebft ho\u1eb7c t\u00ednh to\u00e1n ph\u1ee9c t\u1ea1p. V\u1edbi Grid, b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ecbnh ngh\u0129a c\u1ea5u tr\u00fac l\u01b0\u1edbi r\u00f5 r\u00e0ng v\u00e0 \u0111\u1eb7t c\u00e1c ph\u1ea7n t\u1eed v\u00e0o v\u1ecb tr\u00ed mong mu\u1ed1n m\u1ed9t c\u00e1ch ch\u00ednh x\u00e1c, d\u1ec5 d\u00e0ng h\u01a1n nhi\u1ec1u.<\/p>\n<p>Th\u1ee9 hai, CSS Grid cung c\u1ea5p <strong>kh\u1ea3 n\u0103ng ki\u1ec3m so\u00e1t layout v\u01b0\u1ee3t tr\u1ed9i<\/strong>. B\u1ea1n c\u00f3 th\u1ec3 ki\u1ec3m so\u00e1t ch\u00ednh x\u00e1c k\u00edch th\u01b0\u1edbc, v\u1ecb tr\u00ed v\u00e0 s\u1ef1 c\u0103n ch\u1ec9nh c\u1ee7a c\u00e1c ph\u1ea7n t\u1eed theo c\u1ea3 hai chi\u1ec1u. \u0110i\u1ec1u n\u00e0y l\u00e0 c\u1ef1c k\u1ef3 quan tr\u1ecdng khi c\u1ea7n x\u00e2y d\u1ef1ng c\u00e1c giao di\u1ec7n pixel-perfect ho\u1eb7c c\u00e1c b\u1ed1 c\u1ee5c b\u1ea5t \u0111\u1ed1i x\u1ee9ng \u0111\u1ed9c \u0111\u00e1o.<\/p>\n<p>M\u1ed9t l\u1ee3i \u00edch quan tr\u1ecdng kh\u00e1c l\u00e0 <strong>t\u00e1ch bi\u1ec7t c\u1ea5u tr\u00fac (HTML) v\u00e0 tr\u00ecnh b\u00e0y (CSS)<\/strong>. CSS Grid cho ph\u00e9p b\u1ea1n thay \u0111\u1ed5i th\u1ee9 t\u1ef1 hi\u1ec3n th\u1ecb c\u1ee7a c\u00e1c ph\u1ea7n t\u1eed m\u00e0 kh\u00f4ng c\u1ea7n s\u1eeda \u0111\u1ed5i c\u1ea5u tr\u00fac HTML. \u0110i\u1ec1u n\u00e0y gi\u00fap <a href=\"https:\/\/interdata.vn\/blog\/source-code-la-gi\/\">m\u00e3 ngu\u1ed3n<\/a> s\u1ea1ch s\u1ebd, d\u1ec5 b\u1ea3o tr\u00ec v\u00e0 linh ho\u1ea1t h\u01a1n, \u0111\u1ed3ng th\u1eddi t\u1ed1t cho c\u1ea3 <a href=\"https:\/\/interdata.vn\/blog\/seo-la-gi\/\">SEO<\/a> v\u00e0 kh\u1ea3ibility truy c\u1eadp (accessibility).<\/p>\n<p>CSS Grid c\u0169ng l\u00e0 m\u1ed9t c\u00f4ng c\u1ee5 tuy\u1ec7t v\u1eddi cho <strong><a href=\"https:\/\/interdata.vn\/blog\/thiet-ke-website-la-gi\/\">thi\u1ebft k\u1ebf web<\/a> \u0111\u00e1p \u1ee9ng (responsive design)<\/strong>. B\u1ea1n c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng \u0111\u1ecbnh ngh\u0129a l\u1ea1i c\u1ea5u tr\u00fac l\u01b0\u1edbi cho c\u00e1c k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh kh\u00e1c nhau b\u1eb1ng Media Queries. Vi\u1ec7c s\u1eafp x\u1ebfp l\u1ea1i c\u00e1c kh\u1ed1i n\u1ed9i dung cho mobile, tablet v\u00e0 desktop tr\u1edf n\u00ean tr\u1ef1c quan v\u00e0 hi\u1ec7u qu\u1ea3 h\u01a1n bao gi\u1edd h\u1ebft.<\/p>\n<p>So v\u1edbi c\u00e1c k\u1ef9 thu\u1eadt c\u0169, vi\u1ec7c <strong>vi\u1ebft code CSS th\u01b0\u1eddng ng\u1eafn g\u1ecdn v\u00e0 d\u1ec5 hi\u1ec3u h\u01a1n<\/strong> khi s\u1eed d\u1ee5ng Grid. C\u00e1c thu\u1ed9c t\u00ednh c\u1ee7a Grid \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf logic, gi\u00fap b\u1ea1n m\u00f4 t\u1ea3 layout mong mu\u1ed1n m\u1ed9t c\u00e1ch r\u00f5 r\u00e0ng, gi\u1ea3m thi\u1ec3u s\u1ef1 ph\u1ee9c t\u1ea1p v\u00e0 s\u1ed1 d\u00f2ng code c\u1ea7n vi\u1ebft.<\/p>\n<p>Cu\u1ed1i c\u00f9ng, CSS Grid \u0111\u01b0\u1ee3c <strong>h\u1ed7 tr\u1ee3 r\u1ed9ng r\u00e3i b\u1edfi c\u00e1c tr\u00ecnh duy\u1ec7t hi\u1ec7n \u0111\u1ea1i<\/strong>. H\u1ea7u h\u1ebft c\u00e1c tr\u00ecnh duy\u1ec7t ph\u1ed5 bi\u1ebfn nh\u01b0 Chrome, Firefox, Safari, Edge \u0111\u1ec1u \u0111\u00e3 h\u1ed7 tr\u1ee3 \u0111\u1ea7y \u0111\u1ee7 c\u00e1c t\u00ednh n\u0103ng c\u1ee7a Grid Layout, gi\u00fap b\u1ea1n t\u1ef1 tin \u00e1p d\u1ee5ng n\u00f3 v\u00e0o c\u00e1c d\u1ef1 \u00e1n th\u1ef1c t\u1ebf m\u00e0 kh\u00f4ng qu\u00e1 lo l\u1eafng v\u1ec1 v\u1ea5n \u0111\u1ec1 t\u01b0\u01a1ng th\u00edch.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Cac-khai-niem-cot-loi-cua-CSS-Grid\"><\/span>C\u00e1c kh\u00e1i ni\u1ec7m c\u1ed1t l\u00f5i c\u1ee7a CSS Grid<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0110\u1ec3 s\u1eed d\u1ee5ng CSS Grid hi\u1ec7u qu\u1ea3, b\u1ea1n c\u1ea7n n\u1eafm v\u1eefng c\u00e1c thu\u1eadt ng\u1eef v\u00e0 kh\u00e1i ni\u1ec7m n\u1ec1n t\u1ea3ng c\u1ee7a n\u00f3. Hi\u1ec3u r\u00f5 nh\u1eefng th\u00e0nh ph\u1ea7n n\u00e0y s\u1ebd gi\u00fap b\u1ea1n h\u00ecnh dung v\u00e0 x\u00e2y d\u1ef1ng c\u00e1c b\u1ed1 c\u1ee5c l\u01b0\u1edbi m\u1ed9t c\u00e1ch ch\u00ednh x\u00e1c. \u0110\u00e2y l\u00e0 nh\u1eefng vi\u00ean g\u1ea1ch \u0111\u1ea7u ti\u00ean x\u00e2y d\u1ef1ng n\u00ean ki\u1ebfn th\u1ee9c v\u1ec1 <strong>h\u1ec7 th\u1ed1ng l\u01b0\u1edbi CSS<\/strong> m\u1ea1nh m\u1ebd n\u00e0y.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2025\/04\/CSS-grid-layout-02.jpg\" alt=\"CSS grid layout 02\" width=\"750\" height=\"500\" class=\"aligncenter size-full wp-image-27637\" title=\"\" srcset=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2025\/04\/CSS-grid-layout-02.jpg 750w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2025\/04\/CSS-grid-layout-02-300x200.jpg 300w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Grid-Container-va-Grid-Item\"><\/span>Grid Container v\u00e0 Grid Item<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0110\u00e2y l\u00e0 hai vai tr\u00f2 c\u01a1 b\u1ea3n nh\u1ea5t trong m\u00f4 h\u00ecnh CSS Grid.<\/p>\n<p><strong>Grid Container (V\u00f9ng ch\u1ee9a l\u01b0\u1edbi):<\/strong> L\u00e0 ph\u1ea7n t\u1eed HTML m\u00e0 b\u1ea1n \u00e1p d\u1ee5ng thu\u1ed9c t\u00ednh <code>display: grid<\/code> ho\u1eb7c <code>display: inline-grid<\/code> v\u00e0o. N\u00f3 ch\u00ednh l\u00e0 &#8220;khung&#8221; bao b\u1ecdc to\u00e0n b\u1ed9 h\u1ec7 th\u1ed1ng l\u01b0\u1edbi c\u1ee7a b\u1ea1n. M\u1ecdi \u0111\u1ecbnh ngh\u0129a v\u1ec1 c\u1ea5u tr\u00fac l\u01b0\u1edbi (s\u1ed1 c\u1ed9t, s\u1ed1 h\u00e0ng, kho\u1ea3ng c\u00e1ch&#8230;) \u0111\u1ec1u \u0111\u01b0\u1ee3c thi\u1ebft l\u1eadp tr\u00ean Grid Container.<\/p>\n<p>CSS<\/p>\n<pre><code class=\"language-plaintext\">\/* Bi\u1ebfn ph\u1ea7n t\u1eed c\u00f3 class .container th\u00e0nh Grid Container *\/\r\n.container {\r\n  display: grid; \/* ho\u1eb7c inline-grid *\/\r\n  \/* C\u00e1c thu\u1ed9c t\u00ednh \u0111\u1ecbnh ngh\u0129a l\u01b0\u1edbi s\u1ebd \u0111\u1eb7t \u1edf \u0111\u00e2y *\/\r\n}\r\n<\/code><\/pre>\n<p><strong>Grid Item (Ph\u1ea7n t\u1eed l\u01b0\u1edbi):<\/strong> L\u00e0 c\u00e1c ph\u1ea7n t\u1eed con tr\u1ef1c ti\u1ebfp (direct children) c\u1ee7a Grid Container. \u0110\u00e2y ch\u00ednh l\u00e0 nh\u1eefng n\u1ed9i dung m\u00e0 b\u1ea1n mu\u1ed1n s\u1eafp x\u1ebfp v\u00e0o b\u00ean trong l\u01b0\u1edbi. M\u1eb7c \u0111\u1ecbnh, m\u1ed7i Grid Item s\u1ebd chi\u1ebfm m\u1ed9t \u00f4 (Grid Cell) trong l\u01b0\u1edbi theo th\u1ee9 t\u1ef1 xu\u1ea5t hi\u1ec7n trong HTML. B\u1ea1n c\u00f3 th\u1ec3 \u0111i\u1ec1u khi\u1ec3n v\u1ecb tr\u00ed v\u00e0 k\u00edch th\u01b0\u1edbc c\u1ee7a ch\u00fang.<\/p>\n<p>HTML<\/p>\n<pre><code class=\"language-plaintext\">&lt;div class=\"container\"&gt;\r\n  &lt;div class=\"item item-1\"&gt;Ph\u1ea7n t\u1eed 1&lt;\/div&gt; &lt;div class=\"item item-2\"&gt;Ph\u1ea7n t\u1eed 2&lt;\/div&gt; &lt;div class=\"item item-3\"&gt;Ph\u1ea7n t\u1eed 3&lt;\/div&gt; &lt;\/div&gt;\r\n<\/code><\/pre>\n<p>Hi\u1ec3u r\u00f5 s\u1ef1 ph\u00e2n bi\u1ec7t gi\u1eefa <strong>Grid Container<\/strong> v\u00e0 <strong>Grid Item<\/strong> l\u00e0 c\u1ef1c k\u1ef3 quan tr\u1ecdng, v\u00ec c\u00e1c thu\u1ed9c t\u00ednh CSS Grid kh\u00e1c nhau s\u1ebd \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng cho t\u1eebng lo\u1ea1i ph\u1ea7n t\u1eed n\u00e0y.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Grid-Lines-Duong-ke-luoi\"><\/span>Grid Lines (\u0110\u01b0\u1eddng k\u1ebb l\u01b0\u1edbi)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>H\u00e3y t\u01b0\u1edfng t\u01b0\u1ee3ng Grid Container c\u1ee7a b\u1ea1n nh\u01b0 m\u1ed9t t\u1edd gi\u1ea5y k\u1ebb \u00f4 ly. <strong>Grid Lines (\u0110\u01b0\u1eddng k\u1ebb l\u01b0\u1edbi)<\/strong> ch\u00ednh l\u00e0 nh\u1eefng \u0111\u01b0\u1eddng k\u1ebb ngang v\u00e0 d\u1ecdc t\u1ea1o n\u00ean c\u00e1c \u00f4 \u0111\u00f3. Ch\u00fang ph\u00e2n chia kh\u00f4ng gian c\u1ee7a Grid Container th\u00e0nh c\u00e1c h\u00e0ng v\u00e0 c\u1ed9t.<\/p>\n<p>Grid Lines \u0111\u01b0\u1ee3c \u0111\u00e1nh s\u1ed1 t\u1ef1 \u0111\u1ed9ng, b\u1eaft \u0111\u1ea7u t\u1eeb 1. \u0110\u01b0\u1eddng k\u1ebb \u0111\u1ea7u ti\u00ean b\u00ean tr\u00e1i (\u0111\u1ee9ng) l\u00e0 \u0111\u01b0\u1eddng k\u1ebb c\u1ed9t s\u1ed1 1, \u0111\u01b0\u1eddng k\u1ebb ti\u1ebfp theo l\u00e0 s\u1ed1 2, v\u00e0 c\u1ee9 th\u1ebf. T\u01b0\u01a1ng t\u1ef1, \u0111\u01b0\u1eddng k\u1ebb ngang tr\u00ean c\u00f9ng l\u00e0 \u0111\u01b0\u1eddng k\u1ebb h\u00e0ng s\u1ed1 1, \u0111\u01b0\u1eddng ti\u1ebfp theo l\u00e0 s\u1ed1 2&#8230;<\/p>\n<p>B\u1ea1n c\u0169ng c\u00f3 th\u1ec3 \u0111\u00e1nh s\u1ed1 t\u1eeb ph\u1ea3i sang tr\u00e1i ho\u1eb7c t\u1eeb d\u01b0\u1edbi l\u00ean tr\u00ean b\u1eb1ng s\u1ed1 \u00e2m. \u0110\u01b0\u1eddng k\u1ebb cu\u1ed1i c\u00f9ng b\u00ean ph\u1ea3i l\u00e0 -1, \u0111\u01b0\u1eddng k\u1ebf cu\u1ed1i l\u00e0 -2&#8230; T\u01b0\u01a1ng t\u1ef1 cho \u0111\u01b0\u1eddng k\u1ebb h\u00e0ng. Vi\u1ec7c \u0111\u00e1nh s\u1ed1 n\u00e0y r\u1ea5t quan tr\u1ecdng v\u00ec b\u1ea1n s\u1ebd d\u00f9ng ch\u1ec9 s\u1ed1 c\u1ee7a Grid Lines \u0111\u1ec3 x\u00e1c \u0111\u1ecbnh v\u1ecb tr\u00ed v\u00e0 k\u00edch th\u01b0\u1edbc c\u1ee7a c\u00e1c Grid Item.<\/p>\n<p>V\u00ed d\u1ee5, m\u1ed9t l\u01b0\u1edbi c\u00f3 3 c\u1ed9t s\u1ebd c\u00f3 4 \u0111\u01b0\u1eddng k\u1ebb c\u1ed9t (1, 2, 3, 4 ho\u1eb7c 1, 2, 3, -1). M\u1ed9t l\u01b0\u1edbi c\u00f3 2 h\u00e0ng s\u1ebd c\u00f3 3 \u0111\u01b0\u1eddng k\u1ebb h\u00e0ng (1, 2, 3 ho\u1eb7c 1, 2, -1).<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Grid-Tracks-Ranh-luoi-%E2%80%93-Hang-va-Cot\"><\/span>Grid Tracks (R\u00e3nh l\u01b0\u1edbi &#8211; H\u00e0ng v\u00e0 C\u1ed9t)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>Grid Track (R\u00e3nh l\u01b0\u1edbi)<\/strong> l\u00e0 kh\u00f4ng gian n\u1eb1m gi\u1eefa hai Grid Line li\u1ec1n k\u1ec1. Ch\u00fang ta c\u00f3 hai lo\u1ea1i Grid Track:<\/p>\n<ul>\n<li><strong>C\u1ed9t (Column):<\/strong> Kh\u00f4ng gian gi\u1eefa hai \u0111\u01b0\u1eddng k\u1ebb l\u01b0\u1edbi d\u1ecdc (vertical grid lines).<\/li>\n<li><strong>H\u00e0ng (Row):<\/strong> Kh\u00f4ng gian gi\u1eefa hai \u0111\u01b0\u1eddng k\u1ebb l\u01b0\u1edbi ngang (horizontal grid lines).<\/li>\n<\/ul>\n<p>B\u1ea1n s\u1ebd \u0111\u1ecbnh ngh\u0129a k\u00edch th\u01b0\u1edbc (chi\u1ec1u r\u1ed9ng c\u1ee7a c\u1ed9t, chi\u1ec1u cao c\u1ee7a h\u00e0ng) c\u1ee7a c\u00e1c Grid Track n\u00e0y tr\u00ean Grid Container b\u1eb1ng c\u00e1c thu\u1ed9c t\u00ednh nh\u01b0 <code>grid-template-columns<\/code> v\u00e0 <code>grid-template-rows<\/code>. K\u00edch th\u01b0\u1edbc n\u00e0y quy\u1ebft \u0111\u1ecbnh c\u1ea5u tr\u00fac t\u1ed5ng th\u1ec3 c\u1ee7a l\u01b0\u1edbi.<\/p>\n<p>V\u00ed d\u1ee5: <code>grid-template-columns: 100px 200px 1fr;<\/code> s\u1ebd t\u1ea1o ra m\u1ed9t l\u01b0\u1edbi c\u00f3 3 c\u1ed9t. C\u1ed9t \u0111\u1ea7u ti\u00ean r\u1ed9ng 100 pixel, c\u1ed9t th\u1ee9 hai r\u1ed9ng 200 pixel, v\u00e0 c\u1ed9t th\u1ee9 ba chi\u1ebfm ph\u1ea7n kh\u00f4ng gian c\u00f2n l\u1ea1i (nh\u1edd \u0111\u01a1n v\u1ecb <code>fr<\/code> &#8211; fractional unit).<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Grid-Cell-O-luoi\"><\/span>Grid Cell (\u00d4 l\u01b0\u1edbi)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>Grid Cell (\u00d4 l\u01b0\u1edbi)<\/strong> l\u00e0 \u0111\u01a1n v\u1ecb kh\u00f4ng gian nh\u1ecf nh\u1ea5t trong h\u1ec7 th\u1ed1ng l\u01b0\u1edbi. N\u00f3 l\u00e0 ph\u1ea7n di\u1ec7n t\u00edch \u0111\u01b0\u1ee3c giao nhau b\u1edfi m\u1ed9t Grid Track h\u00e0ng v\u00e0 m\u1ed9t Grid Track c\u1ed9t. H\u00e3y h\u00ecnh dung n\u00f3 nh\u01b0 m\u1ed9t \u00f4 trong b\u1ea3ng t\u00ednh Excel.<\/p>\n<p>M\u1eb7c \u0111\u1ecbnh, m\u1ed7i Grid Item s\u1ebd \u0111\u01b0\u1ee3c \u0111\u1eb7t v\u00e0o m\u1ed9t Grid Cell ri\u00eang bi\u1ec7t, tu\u1ea7n t\u1ef1 theo th\u1ee9 t\u1ef1 ch\u00fang xu\u1ea5t hi\u1ec7n trong m\u00e3 HTML. N\u1ebfu b\u1ea1n kh\u00f4ng ch\u1ec9 \u0111\u1ecbnh v\u1ecb tr\u00ed c\u1ee5 th\u1ec3, Grid s\u1ebd t\u1ef1 \u0111\u1ed9ng x\u1ebfp c\u00e1c item v\u00e0o c\u00e1c \u00f4 tr\u1ed1ng theo th\u1ee9 t\u1ef1 t\u1eeb tr\u00e1i sang ph\u1ea3i, t\u1eeb tr\u00ean xu\u1ed1ng d\u01b0\u1edbi.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Grid-Area-Vung-luoi\"><\/span>Grid Area (V\u00f9ng l\u01b0\u1edbi)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>Grid Area (V\u00f9ng l\u01b0\u1edbi)<\/strong> l\u00e0 m\u1ed9t kh\u00f4ng gian h\u00ecnh ch\u1eef nh\u1eadt l\u1edbn h\u01a1n, bao g\u1ed3m m\u1ed9t ho\u1eb7c nhi\u1ec1u Grid Cell li\u1ec1n k\u1ec1. N\u00f3 \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh b\u1edfi b\u1ed1n Grid Line: hai \u0111\u01b0\u1eddng k\u1ebb h\u00e0ng (b\u1eaft \u0111\u1ea7u v\u00e0 k\u1ebft th\u00fac) v\u00e0 hai \u0111\u01b0\u1eddng k\u1ebb c\u1ed9t (b\u1eaft \u0111\u1ea7u v\u00e0 k\u1ebft th\u00fac).<\/p>\n<p>B\u1ea1n c\u00f3 th\u1ec3 \u0111\u1eb7t t\u00ean cho c\u00e1c Grid Area b\u1eb1ng thu\u1ed9c t\u00ednh <code>grid-template-areas<\/code> tr\u00ean Grid Container. Sau \u0111\u00f3, b\u1ea1n c\u00f3 th\u1ec3 g\u00e1n c\u00e1c Grid Item v\u00e0o c\u00e1c v\u00f9ng \u0111\u01b0\u1ee3c \u0111\u1eb7t t\u00ean n\u00e0y b\u1eb1ng thu\u1ed9c t\u00ednh <code>grid-area<\/code> tr\u00ean ch\u00ednh Grid Item \u0111\u00f3. \u0110\u00e2y l\u00e0 m\u1ed9t c\u00e1ch r\u1ea5t tr\u1ef1c quan \u0111\u1ec3 x\u00e2y d\u1ef1ng c\u00e1c layout ph\u1ee9c t\u1ea1p.<\/p>\n<p>V\u00ed d\u1ee5, b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ecbnh ngh\u0129a c\u00e1c v\u00f9ng nh\u01b0 &#8216;header&#8217;, &#8216;sidebar&#8217;, &#8216;content&#8217;, &#8216;footer&#8217; v\u00e0 d\u1ec5 d\u00e0ng \u0111\u1eb7t c\u00e1c ph\u1ea7n t\u1eed HTML t\u01b0\u01a1ng \u1ee9ng v\u00e0o \u0111\u00fang c\u00e1c v\u00f9ng \u0111\u00f3 trong l\u01b0\u1edbi.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Huong-dan-su-dung-CSS-Grid-co-ban-qua-vi-du\"><\/span>H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng CSS Grid c\u01a1 b\u1ea3n qua v\u00ed d\u1ee5<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>L\u00fd thuy\u1ebft l\u00e0 v\u1eady, nh\u01b0ng c\u00e1ch t\u1ed1t nh\u1ea5t \u0111\u1ec3 hi\u1ec3u <strong>c\u00e1ch s\u1eed d\u1ee5ng CSS Grid<\/strong> l\u00e0 th\u00f4ng qua v\u00ed d\u1ee5 th\u1ef1c t\u1ebf. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 c\u00e1c b\u01b0\u1edbc c\u01a1 b\u1ea3n \u0111\u1ec3 t\u1ea1o m\u1ed9t layout \u0111\u01a1n gi\u1ea3n b\u1eb1ng CSS Grid, gi\u00fap b\u1ea1n h\u00ecnh dung r\u00f5 h\u01a1n v\u1ec1 c\u00e1ch c\u00e1c kh\u00e1i ni\u1ec7m ho\u1ea1t \u0111\u1ed9ng c\u00f9ng nhau.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2025\/04\/CSS-grid-layout-03.jpg\" alt=\"CSS grid layout 03\" width=\"750\" height=\"486\" class=\"aligncenter size-full wp-image-27638\" title=\"\" srcset=\"https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2025\/04\/CSS-grid-layout-03.jpg 750w, https:\/\/interdata.vn\/blog\/wp-content\/uploads\/2025\/04\/CSS-grid-layout-03-300x194.jpg 300w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Buoc-1-Tao-Grid-Container\"><\/span>B\u01b0\u1edbc 1: T\u1ea1o Grid Container<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0110\u1ea7u ti\u00ean, b\u1ea1n c\u1ea7n m\u1ed9t ph\u1ea7n t\u1eed HTML \u0111\u00f3ng vai tr\u00f2 l\u00e0 <strong>Grid Container<\/strong>. Sau \u0111\u00f3, \u00e1p d\u1ee5ng thu\u1ed9c t\u00ednh <code>display: grid;<\/code> cho n\u00f3 trong CSS. Ti\u1ebfp theo, d\u00f9ng <code>grid-template-columns<\/code> v\u00e0 <code>grid-template-rows<\/code> \u0111\u1ec3 \u0111\u1ecbnh ngh\u0129a c\u1ea5u tr\u00fac l\u01b0\u1edbi mong mu\u1ed1n.<\/p>\n<p>Gi\u1ea3 s\u1eed ch\u00fang ta c\u00f3 HTML sau:<\/p>\n<p>HTML<\/p>\n<pre><code class=\"language-plaintext\">&lt;div class=\"grid-container\"&gt;\r\n  &lt;div class=\"grid-item\"&gt;1&lt;\/div&gt;\r\n  &lt;div class=\"grid-item\"&gt;2&lt;\/div&gt;\r\n  &lt;div class=\"grid-item\"&gt;3&lt;\/div&gt;\r\n  &lt;div class=\"grid-item\"&gt;4&lt;\/div&gt;\r\n  &lt;div class=\"grid-item\"&gt;5&lt;\/div&gt;\r\n  &lt;div class=\"grid-item\"&gt;6&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/code><\/pre>\n<p>B\u00e2y gi\u1edd, h\u00e3y t\u1ea1o m\u1ed9t l\u01b0\u1edbi 3 c\u1ed9t \u0111\u1ec1u nhau v\u00e0 2 h\u00e0ng c\u00f3 chi\u1ec1u cao t\u1ef1 \u0111\u1ed9ng trong CSS:<\/p>\n<p>CSS<\/p>\n<pre><code class=\"language-plaintext\">.grid-container {\r\n  display: grid; \/* K\u00edch ho\u1ea1t Grid Layout *\/\r\n  grid-template-columns: 1fr 1fr 1fr; \/* 3 c\u1ed9t, m\u1ed7i c\u1ed9t chi\u1ebfm 1 ph\u1ea7n b\u1eb1ng nhau *\/\r\n  \/* \u0110\u01a1n v\u1ecb 'fr' (fractional unit) r\u1ea5t h\u1eefu \u00edch \u0111\u1ec3 chia kh\u00f4ng gian kh\u1ea3 d\u1ee5ng *\/\r\n  grid-template-rows: auto auto; \/* 2 h\u00e0ng, chi\u1ec1u cao t\u1ef1 \u0111\u1ed9ng theo n\u1ed9i dung *\/\r\n  border: 2px solid steelblue; \/* Th\u00eam border \u0111\u1ec3 d\u1ec5 nh\u00ecn *\/\r\n  padding: 10px;\r\n}\r\n\r\n.grid-item {\r\n  background-color: lightskyblue;\r\n  border: 1px solid steelblue;\r\n  padding: 20px;\r\n  text-align: center;\r\n  font-size: 1.2em;\r\n}\r\n<\/code><\/pre>\n<p>V\u1edbi \u0111o\u1ea1n m\u00e3 tr\u00ean, ph\u1ea7n t\u1eed <code>.grid-container<\/code> \u0111\u00e3 tr\u1edf th\u00e0nh m\u1ed9t Grid Container. N\u00f3 \u0111\u01b0\u1ee3c chia th\u00e0nh l\u01b0\u1edbi 3 c\u1ed9t b\u1eb1ng nhau v\u00e0 c\u00e1c h\u00e0ng s\u1ebd t\u1ef1 \u0111i\u1ec1u ch\u1ec9nh chi\u1ec1u cao.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Buoc-2-Dat-cac-Grid-Item-vao-luoi\"><\/span>B\u01b0\u1edbc 2: \u0110\u1eb7t c\u00e1c Grid Item v\u00e0o l\u01b0\u1edbi<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Khi b\u1ea1n \u0111\u00e3 \u0111\u1ecbnh ngh\u0129a Grid Container, c\u00e1c <strong>Grid Item<\/strong> (trong v\u00ed d\u1ee5 l\u00e0 c\u00e1c <code>div<\/code> c\u00f3 class <code>.grid-item<\/code>) s\u1ebd t\u1ef1 \u0111\u1ed9ng \u0111\u01b0\u1ee3c \u0111\u1eb7t v\u00e0o c\u00e1c \u00f4 l\u01b0\u1edbi (Grid Cells) theo th\u1ee9 t\u1ef1 xu\u1ea5t hi\u1ec7n trong HTML. Ch\u00fang s\u1ebd l\u1ea5p \u0111\u1ea7y h\u00e0ng \u0111\u1ea7u ti\u00ean t\u1eeb tr\u00e1i sang ph\u1ea3i, sau \u0111\u00f3 xu\u1ed1ng h\u00e0ng th\u1ee9 hai.<\/p>\n<p>Trong v\u00ed d\u1ee5 tr\u00ean, 6 Grid Items s\u1ebd t\u1ef1 \u0111\u1ed9ng s\u1eafp x\u1ebfp v\u00e0o l\u01b0\u1edbi 3&#215;2:<\/p>\n<ul>\n<li>Item 1, 2, 3 n\u1eb1m \u1edf h\u00e0ng 1.<\/li>\n<li>Item 4, 5, 6 n\u1eb1m \u1edf h\u00e0ng 2.<\/li>\n<\/ul>\n<p>\u0110\u00e2y l\u00e0 c\u01a1 ch\u1ebf t\u1ef1 \u0111\u1ed9ng s\u1eafp x\u1ebfp (auto-placement) c\u1ee7a Grid. Tuy nhi\u00ean, b\u1ea1n ho\u00e0n to\u00e0n c\u00f3 th\u1ec3 ki\u1ec3m so\u00e1t v\u1ecb tr\u00ed c\u1ee5 th\u1ec3 c\u1ee7a t\u1eebng item. V\u00ed d\u1ee5, n\u1ebfu mu\u1ed1n Item 1 chi\u1ebfm c\u1ea3 2 c\u1ed9t \u0111\u1ea7u ti\u00ean \u1edf h\u00e0ng 1:<\/p>\n<p>CSS<\/p>\n<pre><code class=\"language-plaintext\">.grid-item:nth-child(1) { \/* Ch\u1ecdn item \u0111\u1ea7u ti\u00ean *\/\r\n  grid-column-start: 1;   \/* B\u1eaft \u0111\u1ea7u t\u1eeb \u0111\u01b0\u1eddng k\u1ebb c\u1ed9t 1 *\/\r\n  grid-column-end: 3;     \/* K\u1ebft th\u00fac TR\u01af\u1edaC \u0111\u01b0\u1eddng k\u1ebb c\u1ed9t 3 (t\u1ee9c l\u00e0 chi\u1ebfm c\u1ed9t 1 v\u00e0 2) *\/\r\n  \/* C\u00f3 th\u1ec3 vi\u1ebft g\u1ecdn: grid-column: 1 \/ 3; *\/\r\n  background-color: tomato; \/* \u0110\u1ed5i m\u00e0u \u0111\u1ec3 th\u1ea5y r\u00f5 *\/\r\n}\r\n<\/code><\/pre>\n<p>Khi b\u1ea1n l\u00e0m v\u1eady, c\u00e1c item kh\u00e1c s\u1ebd t\u1ef1 \u0111\u1ed9ng \u0111i\u1ec1u ch\u1ec9nh v\u1ecb tr\u00ed \u0111\u1ec3 l\u1ea5p v\u00e0o c\u00e1c \u00f4 c\u00f2n tr\u1ed1ng theo <a href=\"https:\/\/interdata.vn\/blog\/thuat-toan-algorithm\/\">thu\u1eadt to\u00e1n<\/a> c\u1ee7a Grid.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Buoc-3-Tao-khoang-cach-giua-cac-o-Gaps\"><\/span>B\u01b0\u1edbc 3: T\u1ea1o kho\u1ea3ng c\u00e1ch gi\u1eefa c\u00e1c \u00f4 (Gaps)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0110\u1ec3 t\u1ea1o kho\u1ea3ng tr\u1ed1ng (gutter) gi\u1eefa c\u00e1c h\u00e0ng v\u00e0 c\u1ed9t, thay v\u00ec d\u00f9ng <code>margin<\/code> ph\u1ee9c t\u1ea1p, CSS Grid cung c\u1ea5p c\u00e1c thu\u1ed9c t\u00ednh <code>gap<\/code> r\u1ea5t ti\u1ec7n l\u1ee3i. B\u1ea1n ch\u1ec9 c\u1ea7n th\u00eam ch\u00fang v\u00e0o Grid Container.<\/p>\n<ul>\n<li><code>row-gap<\/code>: Kho\u1ea3ng c\u00e1ch gi\u1eefa c\u00e1c h\u00e0ng.<\/li>\n<li><code>column-gap<\/code>: Kho\u1ea3ng c\u00e1ch gi\u1eefa c\u00e1c c\u1ed9t.<\/li>\n<li><code>gap<\/code>: Vi\u1ebft t\u1eaft cho c\u1ea3 <code>row-gap<\/code> v\u00e0 <code>column-gap<\/code> (n\u1ebfu ch\u1ec9 c\u00f3 1 gi\u00e1 tr\u1ecb, \u00e1p d\u1ee5ng cho c\u1ea3 hai; n\u1ebfu c\u00f3 2 gi\u00e1 tr\u1ecb, gi\u00e1 tr\u1ecb \u0111\u1ea7u l\u00e0 <code>row-gap<\/code>, gi\u00e1 tr\u1ecb sau l\u00e0 <code>column-gap<\/code>).<\/li>\n<\/ul>\n<p>Th\u00eam v\u00e0o v\u00ed d\u1ee5 tr\u00ean:<\/p>\n<p>CSS<\/p>\n<pre><code class=\"language-plaintext\">.grid-container {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr 1fr;\r\n  grid-template-rows: auto auto;\r\n  border: 2px solid steelblue;\r\n  padding: 10px;\r\n\r\n  \/* Th\u00eam kho\u1ea3ng c\u00e1ch *\/\r\n  gap: 15px; \/* Kho\u1ea3ng c\u00e1ch 15px cho c\u1ea3 h\u00e0ng v\u00e0 c\u1ed9t *\/\r\n  \/* Ho\u1eb7c chi ti\u1ebft: *\/\r\n  \/* row-gap: 10px; *\/\r\n  \/* column-gap: 20px; *\/\r\n}\r\n\r\n\/* CSS cho .grid-item gi\u1eef nguy\u00ean *\/\r\n<\/code><\/pre>\n<p>B\u00e2y gi\u1edd, b\u1ea1n s\u1ebd th\u1ea5y c\u00f3 m\u1ed9t kho\u1ea3ng tr\u1ed1ng 15px gi\u1eefa c\u00e1c \u00f4 l\u01b0\u1edbi, l\u00e0m cho layout tr\u00f4ng tho\u00e1ng \u0111\u00e3ng h\u01a1n m\u00e0 kh\u00f4ng c\u1ea7n t\u00ednh to\u00e1n margin ph\u1ee9c t\u1ea1p. \u0110\u00e2y l\u00e0 m\u1ed9t <strong>v\u00ed d\u1ee5 CSS Grid c\u01a1 b\u1ea3n<\/strong> nh\u01b0ng th\u1ec3 hi\u1ec7n \u0111\u01b0\u1ee3c s\u1ee9c m\u1ea1nh c\u1ed1t l\u00f5i c\u1ee7a n\u00f3.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"So-sanh-CSS-Grid-va-Flexbox-Khi-nao-dung-cai-nao\"><\/span>So s\u00e1nh CSS Grid v\u00e0 Flexbox: Khi n\u00e0o d\u00f9ng c\u00e1i n\u00e0o?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>M\u1ed9t c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p \u0111\u1ed1i v\u1edbi ng\u01b0\u1eddi m\u1edbi h\u1ecdc CSS hi\u1ec7n \u0111\u1ea1i l\u00e0: &#8220;<strong>N\u00ean d\u00f9ng CSS Grid hay CSS Flexbox?<\/strong>&#8221; C\u1ea3 hai \u0111\u1ec1u l\u00e0 nh\u1eefng c\u00f4ng c\u1ee5 layout m\u1ea1nh m\u1ebd, nh\u01b0ng ch\u00fang \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf cho nh\u1eefng m\u1ee5c \u0111\u00edch kh\u00e1c nhau. Hi\u1ec3u r\u00f5 s\u1ef1 kh\u00e1c bi\u1ec7t s\u1ebd gi\u00fap b\u1ea1n <strong>so s\u00e1nh Grid v\u00e0 Flexbox<\/strong> v\u00e0 \u0111\u01b0a ra l\u1ef1a ch\u1ecdn \u0111\u00fang \u0111\u1eafn cho t\u1eebng t\u00ecnh hu\u1ed1ng c\u1ee5 th\u1ec3.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Diem-khac-biet-chinh\"><\/span>\u0110i\u1ec3m kh\u00e1c bi\u1ec7t ch\u00ednh<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>H\u00e3y t\u00f3m t\u1eaft nh\u1eefng kh\u00e1c bi\u1ec7t c\u1ed1t l\u00f5i gi\u1eefa hai h\u1ec7 th\u1ed1ng layout n\u00e0y:<\/p>\n<figure class=\"table\">\n<table>\n<thead>\n<tr>\n<th>Ti\u00eau ch\u00ed<\/th>\n<th>CSS Grid<\/th>\n<th>CSS Flexbox<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>S\u1ed1 chi\u1ec1u<\/strong><\/td>\n<td><strong>Hai chi\u1ec1u (2D)<\/strong>: H\u00e0ng v\u00e0 C\u1ed9t \u0111\u1ed3ng th\u1eddi<\/td>\n<td><strong>M\u1ed9t chi\u1ec1u (1D)<\/strong>: Ho\u1eb7c H\u00e0ng, ho\u1eb7c C\u1ed9t<\/td>\n<\/tr>\n<tr>\n<td><strong>Ki\u1ec3m so\u00e1t<\/strong><\/td>\n<td>M\u1ea1nh v\u1ec1 layout t\u1ed5ng th\u1ec3 trang, c\u1ea5u tr\u00fac l\u1edbn<\/td>\n<td>M\u1ea1nh v\u1ec1 s\u1eafp x\u1ebfp c\u00e1c item tr\u00ean m\u1ed9t tr\u1ee5c<\/td>\n<\/tr>\n<tr>\n<td><strong>H\u01b0\u1edbng ti\u1ebfp c\u1eadn<\/strong><\/td>\n<td><strong>Layout-in<\/strong>: \u0110\u1ecbnh ngh\u0129a l\u01b0\u1edbi tr\u01b0\u1edbc, \u0111\u1eb7t item v\u00e0o<\/td>\n<td><strong>Content-out<\/strong>: Item t\u1ef1 \u0111i\u1ec1u ch\u1ec9nh v\u1ecb tr\u00ed\/k\u00edch th\u01b0\u1edbc<\/td>\n<\/tr>\n<tr>\n<td><strong>\u0110\u1ed9 ph\u1ee9c t\u1ea1p<\/strong><\/td>\n<td>Nhi\u1ec1u thu\u1ed9c t\u00ednh h\u01a1n, ph\u1ee9c t\u1ea1p h\u01a1n ban \u0111\u1ea7u<\/td>\n<td>\u00cdt thu\u1ed9c t\u00ednh h\u01a1n, d\u1ec5 n\u1eafm b\u1eaft h\u01a1n ban \u0111\u1ea7u<\/td>\n<\/tr>\n<tr>\n<td><strong>M\u1ee5c \u0111\u00edch ch\u00ednh<\/strong><\/td>\n<td>D\u00e0n trang t\u1ed5ng th\u1ec3, b\u1ed1 c\u1ee5c ph\u1ee9c t\u1ea1p<\/td>\n<td>C\u0103n ch\u1ec9nh component, menu, c\u00e1c d\u1ea3i ph\u1ea7n t\u1eed<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n<p>S\u1ef1 kh\u00e1c bi\u1ec7t c\u0103n b\u1ea3n n\u1eb1m \u1edf s\u1ed1 chi\u1ec1u ki\u1ec3m so\u00e1t. <strong>Grid sinh ra \u0111\u1ec3 l\u00e0m vi\u1ec7c v\u1edbi hai chi\u1ec1u<\/strong>, cho ph\u00e9p b\u1ea1n \u0111\u1ecbnh v\u1ecb ph\u1ea7n t\u1eed d\u1ef1a tr\u00ean c\u1ea3 h\u00e0ng v\u00e0 c\u1ed9t m\u1ed9t c\u00e1ch t\u01b0\u1eddng minh. <strong>Flexbox t\u1eadp trung v\u00e0o m\u1ed9t chi\u1ec1u<\/strong>, gi\u00fap s\u1eafp x\u1ebfp v\u00e0 c\u0103n ch\u1ec9nh c\u00e1c ph\u1ea7n t\u1eed d\u1ecdc theo m\u1ed9t tr\u1ee5c ch\u00ednh (main axis) r\u1ea5t hi\u1ec7u qu\u1ea3.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Truong-hop-nen-dung-CSS-Grid\"><\/span>Tr\u01b0\u1eddng h\u1ee3p n\u00ean d\u00f9ng CSS Grid<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>B\u1ea1n n\u00ean \u01b0u ti\u00ean s\u1eed d\u1ee5ng <strong>CSS Grid<\/strong> trong c\u00e1c tr\u01b0\u1eddng h\u1ee3p sau:<\/p>\n<ol>\n<li><strong>Layout t\u1ed5ng th\u1ec3 c\u1ee7a trang (Page Layout):<\/strong> Khi c\u1ea7n \u0111\u1ecbnh ngh\u0129a c\u00e1c v\u00f9ng ch\u00ednh c\u1ee7a trang nh\u01b0 <a href=\"https:\/\/interdata.vn\/blog\/header-la-gi\/\">header<\/a>, <a href=\"https:\/\/interdata.vn\/blog\/sidebar-la-gi\/\">sidebar<\/a>, main content, <a href=\"https:\/\/interdata.vn\/blog\/footer-la-gi\/\">footer<\/a>. Grid cung c\u1ea5p c\u00e1ch ti\u1ebfp c\u1eadn &#8220;t\u1eeb tr\u00ean xu\u1ed1ng&#8221;, gi\u00fap b\u1ea1n ph\u00e1c th\u1ea3o b\u1ed1 c\u1ee5c t\u1ed5ng th\u1ec3 m\u1ed9t c\u00e1ch r\u00f5 r\u00e0ng.<\/li>\n<li><strong>B\u1ed1 c\u1ee5c hai chi\u1ec1u ph\u1ee9c t\u1ea1p:<\/strong> B\u1ea5t c\u1ee9 khi n\u00e0o b\u1ea1n c\u1ea7n ki\u1ec3m so\u00e1t v\u1ecb tr\u00ed v\u00e0 k\u00edch th\u01b0\u1edbc c\u1ee7a c\u00e1c ph\u1ea7n t\u1eed theo c\u1ea3 h\u00e0ng v\u00e0 c\u1ed9t \u0111\u1ed3ng th\u1eddi (v\u00ed d\u1ee5: th\u01b0 vi\u1ec7n \u1ea3nh d\u1ea1ng l\u01b0\u1edbi, dashboard ph\u1ee9c t\u1ea1p, giao di\u1ec7n \u1ee9ng d\u1ee5ng&#8230;).<\/li>\n<li><strong>C\u1ea7n s\u1ef1 ch\u00ednh x\u00e1c v\u1ec1 c\u1ea3 h\u00e0ng v\u00e0 c\u1ed9t:<\/strong> Khi v\u1ecb tr\u00ed t\u01b0\u01a1ng \u0111\u1ed1i c\u1ee7a c\u00e1c ph\u1ea7n t\u1eed theo c\u1ea3 hai tr\u1ee5c l\u00e0 quan tr\u1ecdng.<\/li>\n<li><strong>Mu\u1ed1n t\u00e1ch bi\u1ec7t layout kh\u1ecfi c\u1ea5u tr\u00fac HTML:<\/strong> Khi b\u1ea1n mu\u1ed1n d\u1ec5 d\u00e0ng thay \u0111\u1ed5i v\u1ecb tr\u00ed hi\u1ec3n th\u1ecb c\u1ee7a c\u00e1c ph\u1ea7n t\u1eed m\u00e0 kh\u00f4ng c\u1ea7n s\u1eeda \u0111\u1ed5i HTML (d\u00f9ng <code>grid-template-areas<\/code> ho\u1eb7c <code>order<\/code> k\u1ebft h\u1ee3p v\u1edbi c\u00e1c thu\u1ed9c t\u00ednh v\u1ecb tr\u00ed).<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Truong-hop-nen-dung-CSS-Flexbox\"><\/span>Tr\u01b0\u1eddng h\u1ee3p n\u00ean d\u00f9ng CSS Flexbox<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>CSS Flexbox<\/strong> v\u1eabn l\u00e0 l\u1ef1a ch\u1ecdn tuy\u1ec7t v\u1eddi v\u00e0 th\u01b0\u1eddng \u0111\u01a1n gi\u1ea3n h\u01a1n cho c\u00e1c t\u00e1c v\u1ee5 sau:<\/p>\n<ol>\n<li><strong>S\u1eafp x\u1ebfp c\u00e1c th\u00e0nh ph\u1ea7n trong m\u1ed9t component:<\/strong> Khi b\u1ea1n c\u1ea7n c\u0103n ch\u1ec9nh c\u00e1c n\u00fat trong m\u1ed9t thanh c\u00f4ng c\u1ee5, c\u00e1c m\u1ee5c trong menu \u0111i\u1ec1u h\u01b0\u1edbng, c\u00e1c tr\u01b0\u1eddng trong m\u1ed9t form nh\u1ecf, hay c\u00e1c card s\u1ea3n ph\u1ea9m tr\u00ean m\u1ed9t h\u00e0ng.<\/li>\n<li><strong>Layout m\u1ed9t chi\u1ec1u:<\/strong> Khi b\u1ea1n ch\u1ec9 c\u1ea7n s\u1eafp x\u1ebfp c\u00e1c ph\u1ea7n t\u1eed theo m\u1ed9t h\u00e0ng ngang ho\u1eb7c m\u1ed9t c\u1ed9t d\u1ecdc v\u00e0 mu\u1ed1n ch\u00fang t\u1ef1 \u0111\u1ed9ng co gi\u00e3n, ph\u00e2n b\u1ed1 kh\u00f4ng gian.<\/li>\n<li><strong>C\u0103n ch\u1ec9nh n\u1ed9i dung \u0111\u01a1n gi\u1ea3n:<\/strong> Flexbox c\u1ef1c k\u1ef3 m\u1ea1nh m\u1ebd trong vi\u1ec7c c\u0103n ch\u1ec9nh c\u00e1c ph\u1ea7n t\u1eed theo tr\u1ee5c ch\u00ednh (justify-content) v\u00e0 tr\u1ee5c ch\u00e9o (align-items), v\u00ed d\u1ee5 nh\u01b0 c\u0103n gi\u1eefa m\u1ed9t box theo c\u1ea3 chi\u1ec1u ngang v\u00e0 d\u1ecdc.<\/li>\n<li><strong>Khi ch\u01b0a c\u1ea7n \u0111\u1ebfn s\u1ee9c m\u1ea1nh 2D c\u1ee7a Grid:<\/strong> \u0110\u1ed1i v\u1edbi c\u00e1c layout \u0111\u01a1n gi\u1ea3n h\u01a1n, Flexbox th\u01b0\u1eddng d\u1ec5 tri\u1ec3n khai v\u00e0 c\u1ea7n \u00edt code h\u01a1n.<\/li>\n<\/ol>\n<p><em><strong>Quan tr\u1ecdng:<\/strong> CSS Grid v\u00e0 Flexbox kh\u00f4ng lo\u1ea1i tr\u1eeb l\u1eabn nhau. Ch\u00fang ho\u00e0n to\u00e0n c\u00f3 th\u1ec3 <strong>s\u1eed d\u1ee5ng k\u1ebft h\u1ee3p<\/strong>! B\u1ea1n c\u00f3 th\u1ec3 d\u00f9ng Grid \u0111\u1ec3 t\u1ea1o c\u1ea5u tr\u00fac layout ch\u00ednh c\u1ee7a trang v\u00e0 d\u00f9ng Flexbox \u0111\u1ec3 s\u1eafp x\u1ebfp n\u1ed9i dung b\u00ean trong c\u00e1c Grid Item. \u0110\u00e2y l\u00e0 m\u1ed9t c\u00e1ch ti\u1ebfp c\u1eadn r\u1ea5t ph\u1ed5 bi\u1ebfn v\u00e0 hi\u1ec7u qu\u1ea3 trong ph\u00e1t tri\u1ec3n web hi\u1ec7n \u0111\u1ea1i.<\/em><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Kha-nang-ho-tro-cua-trinh-duyet\"><\/span>Kh\u1ea3 n\u0103ng h\u1ed7 tr\u1ee3 c\u1ee7a tr\u00ecnh duy\u1ec7t<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>M\u1ed9t y\u1ebfu t\u1ed1 quan tr\u1ecdng khi quy\u1ebft \u0111\u1ecbnh s\u1eed d\u1ee5ng m\u1ed9t c\u00f4ng ngh\u1ec7 web m\u1edbi l\u00e0 m\u1ee9c \u0111\u1ed9 h\u1ed7 tr\u1ee3 c\u1ee7a c\u00e1c tr\u00ecnh duy\u1ec7t. Tin vui l\u00e0 <strong>CSS Grid Layout hi\u1ec7n \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 r\u1ea5t t\u1ed1t<\/strong> b\u1edfi h\u1ea7u h\u1ebft c\u00e1c tr\u00ecnh duy\u1ec7t hi\u1ec7n \u0111\u1ea1i tr\u00ean c\u1ea3 m\u00e1y t\u00ednh v\u00e0 thi\u1ebft b\u1ecb di \u0111\u1ed9ng.<\/p>\n<p>T\u00ednh \u0111\u1ebfn n\u0103m 2025, c\u00e1c phi\u00ean b\u1ea3n m\u1edbi nh\u1ea5t c\u1ee7a Google Chrome, Mozilla Firefox, Apple Safari (c\u1ea3 tr\u00ean macOS v\u00e0 iOS), Microsoft Edge \u0111\u1ec1u \u0111\u00e3 tri\u1ec3n khai \u0111\u1ea7y \u0111\u1ee7 c\u00e1c t\u00ednh n\u0103ng c\u1ed1t l\u00f5i c\u1ee7a CSS Grid. Ngay c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t c\u0169 h\u01a1n m\u1ed9t ch\u00fat c\u0169ng \u0111\u00e3 c\u00f3 h\u1ed7 tr\u1ee3 c\u01a1 b\u1ea3n.<\/p>\n<p>\u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 b\u1ea1n c\u00f3 th\u1ec3 t\u1ef1 tin <strong>s\u1eed d\u1ee5ng CSS Grid trong c\u00e1c d\u1ef1 \u00e1n th\u1ef1c t\u1ebf<\/strong> m\u00e0 kh\u00f4ng c\u1ea7n qu\u00e1 lo l\u1eafng v\u1ec1 vi\u1ec7c ng\u01b0\u1eddi d\u00f9ng g\u1eb7p l\u1ed7i hi\u1ec3n th\u1ecb. T\u1ef7 l\u1ec7 ng\u01b0\u1eddi d\u00f9ng s\u1eed d\u1ee5ng c\u00e1c tr\u00ecnh duy\u1ec7t h\u1ed7 tr\u1ee3 Grid \u0111\u00e3 r\u1ea5t cao tr\u00ean to\u00e0n c\u1ea7u.<\/p>\n<p>\u0110\u1ec3 ki\u1ec3m tra chi ti\u1ebft v\u00e0 c\u1eadp nh\u1eadt nh\u1ea5t v\u1ec1 m\u1ee9c \u0111\u1ed9 h\u1ed7 tr\u1ee3 cho t\u1eebng thu\u1ed9c t\u00ednh c\u1ee5 th\u1ec3 tr\u00ean c\u00e1c phi\u00ean b\u1ea3n tr\u00ecnh duy\u1ec7t kh\u00e1c nhau, b\u1ea1n n\u00ean tham kh\u1ea3o trang web uy t\u00edn nh\u01b0 <strong>Can I use&#8230; (caniuse.com)<\/strong>. Ch\u1ec9 c\u1ea7n t\u00ecm ki\u1ebfm &#8220;CSS Grid Layout&#8221;, b\u1ea1n s\u1ebd c\u00f3 c\u00e1i nh\u00ecn t\u1ed5ng quan v\u00e0 chi ti\u1ebft nh\u1ea5t.<\/p>\n<p>M\u1eb7c d\u00f9 h\u1ed7 tr\u1ee3 \u0111\u00e3 r\u1ea5t t\u1ed1t, n\u1ebfu d\u1ef1 \u00e1n c\u1ee7a b\u1ea1n y\u00eau c\u1ea7u h\u1ed7 tr\u1ee3 c\u00e1c tr\u00ecnh duy\u1ec7t r\u1ea5t c\u0169 (nh\u01b0 <a href=\"https:\/\/interdata.vn\/blog\/mang-internet\/\">Internet<\/a> Explorer 11 tr\u1edf v\u1ec1 tr\u01b0\u1edbc), b\u1ea1n c\u00f3 th\u1ec3 c\u1ea7n s\u1eed d\u1ee5ng c\u00e1c k\u1ef9 thu\u1eadt d\u1ef1 ph\u00f2ng (fallbacks) ho\u1eb7c c\u00e2n nh\u1eafc l\u1ea1i vi\u1ec7c s\u1eed d\u1ee5ng Grid cho c\u00e1c ph\u1ea7n layout quan tr\u1ecdng. Tuy nhi\u00ean, v\u1edbi xu h\u01b0\u1edbng hi\u1ec7n nay, y\u00eau c\u1ea7u n\u00e0y ng\u00e0y c\u00e0ng \u00edt \u0111i.<\/p>\n<div style=\"background-color: #e6f2ff; border-radius: 10px; padding: 20px; margin: 20px 0; border: 1px solid #b3d9ff;\">\n<p><strong>HOSTING GI\u00c1 R\u1eba UY T\u00cdN &#8211; C\u1ea4U H\u00ccNH AMD &#8211; 100% SSD NVME<\/strong><\/p>\n<p>Khi \u0111\u00e3 t\u1ea1o layout \u0111\u1eb9p v\u1edbi CSS Grid, <a href=\"https:\/\/interdata.vn\/blog\/website-la-gi\/\">website<\/a> c\u1ee7a b\u1ea1n c\u1ea7n n\u01a1i l\u01b0u tr\u1eef \u0111\u00e1ng tin c\u1eady \u0111\u1ec3 ho\u1ea1t \u0111\u1ed9ng nhanh ch\u00f3ng v\u00e0 \u1ed5n \u0111\u1ecbnh. C\u00e2n nh\u1eafc <strong><a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\/\/interdata.vn\/thue-hosting\/\">thu\u00ea Hosting<\/a><\/strong> t\u1ea1i InterData, gi\u00e1 <em>ch\u1ec9 t\u1eeb 1K\/ng\u00e0y<\/em>. Tr\u1ea3i nghi\u1ec7m t\u1ed1c \u0111\u1ed9 cao, \u1ed5n \u0111\u1ecbnh t\u1eeb ph\u1ea7n c\u1ee9ng th\u1ebf h\u1ec7 m\u1edbi nh\u01b0 <a href=\"https:\/\/interdata.vn\/blog\/cpu-amd-epyc\/\">AMD EPYC<\/a> Gen 3, SSD NVMe U.2, c\u1ea5u h\u00ecnh m\u1ea1nh v\u00e0 ch\u1ea5t l\u01b0\u1ee3ng uy t\u00edn.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>B\u1ea1n \u0111ang b\u1eaft \u0111\u1ea7u h\u00e0nh tr\u00ecnh l\u1eadp tr\u00ecnh front-end v\u00e0 c\u1ea3m th\u1ea5y b\u1ed1i r\u1ed1i tr\u01b0\u1edbc vi\u1ec7c s\u1eafp x\u1ebfp b\u1ed1 c\u1ee5c (layout) trang web? CSS Grid Layout ch\u00ednh l\u00e0 m\u1ed9t trong nh\u1eefng c\u00f4ng c\u1ee5 m\u1ea1nh m\u1ebd nh\u1ea5t b\u1ea1n c\u1ea7n n\u1eafm v\u1eefng. B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u1ea3i th\u00edch c\u1eb7n k\u1ebd CSS Grid Layout l\u00e0 g\u00ec, c\u00e1ch n\u00f3<\/p>\n","protected":false},"author":2,"featured_media":27639,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[100],"tags":[],"class_list":["post-27627","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website"],"_links":{"self":[{"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/posts\/27627","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/comments?post=27627"}],"version-history":[{"count":1,"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/posts\/27627\/revisions"}],"predecessor-version":[{"id":27640,"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/posts\/27627\/revisions\/27640"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/media\/27639"}],"wp:attachment":[{"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/media?parent=27627"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/categories?post=27627"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/interdata.vn\/blog\/wp-json\/wp\/v2\/tags?post=27627"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}