{"id":72280,"date":"2024-06-06T06:11:19","date_gmt":"2024-06-05T23:11:19","guid":{"rendered":"https:\/\/itviec.com\/blog\/?p=72280"},"modified":"2025-07-31T17:38:28","modified_gmt":"2025-07-31T10:38:28","slug":"grid-css","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/grid-css\/","title":{"rendered":"Grid CSS: C\u1ea9m nang s\u1eed d\u1ee5ng Grid CSS c\u01a1 b\u1ea3n"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">N\u1ed9i dung b\u00e0i vi\u1ebft<\/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 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/itviec.com\/blog\/grid-css\/#Grid_CSS_la_gi\" >Grid CSS 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:\/\/itviec.com\/blog\/grid-css\/#Cac_thuat_ngu_quan_trong_ve_Grid_CSS\" >C\u00e1c thu\u1eadt ng\u1eef quan tr\u1ecdng v\u1ec1 Grid CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/itviec.com\/blog\/grid-css\/#Cac_thuoc_tinh_cua_Grid_container\" >C\u00e1c thu\u1ed9c t\u00ednh c\u1ee7a Grid container<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/itviec.com\/blog\/grid-css\/#Cac_thuoc_tinh_cua_Grid_Item\" >C\u00e1c thu\u1ed9c t\u00ednh c\u1ee7a Grid Item<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/itviec.com\/blog\/grid-css\/#Cac_cau_hoi_thuong_gap_ve_Grid_CSS\" >C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Grid CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/itviec.com\/blog\/grid-css\/#Ket_luan_Grid_CSS\" >K\u1ebft lu\u1eadn Grid CSS<\/a><\/li><\/ul><\/nav><\/div>\n\n<p><em><strong>Grid l\u00e0 m\u1ed9t h\u1ec7 th\u1ed1ng l\u01b0\u1edbi hai chi\u1ec1u trong CSS, \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 b\u1ed1 tr\u00ed c\u00e1c khu v\u1ef1c ch\u00ednh c\u1ee7a trang ho\u1eb7c c\u00e1c th\u00e0nh ph\u1ea7n trong giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng (UI). Trong b\u00e0i vi\u1ebft n\u00e0y, ITviec s\u1ebd gi\u1edbi thi\u1ec7u v\u1ec1 thu\u1ed9c t\u00ednh Grid CSS d\u01b0\u1edbi nh\u1eefng g\u00f3c nh\u00ecn \u0111\u01a1n gi\u1ea3n v\u00e0 d\u1ec5 hi\u1ec3u nh\u1ea5t d\u00e0nh cho ng\u01b0\u1eddi m\u1edbi b\u1eaft \u0111\u1ea7u.&nbsp;<\/strong><\/em><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">\u0110\u1ecdc b\u00e0i vi\u1ebft \u0111\u1ec3 hi\u1ec3u r\u00f5 h\u01a1n:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">T\u1ed5ng quan v\u1ec1 Grid CSS<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">C\u00e1c thu\u1eadt ng\u1eef quan tr\u1ecdng c\u1ea7n bi\u1ebft v\u1ec1 Grid CSS<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">C\u00e1c thu\u1ed9c t\u00ednh c\u1ee7a Grid Container<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">C\u00e1c thu\u1ed9c t\u00ednh c\u1ee7a Grid Items<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Grid CSS<\/span><\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Tham kh\u1ea3o\u00a0<a href=\"https:\/\/itviec.com\/viec-lam-it\/css?utm_medium=anchor_text_high&amp;utm_source=blog&amp;utm_campaign=viec_lam_css&amp;utm_content=grid_css\" target=\"_blank\" rel=\"noreferrer noopener\">vi\u1ec7c l\u00e0m CSS<\/a>\u00a0to\u00e0n qu\u1ed1c<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-grid-css-la-gi\"><span class=\"ez-toc-section\" id=\"Grid_CSS_la_gi\"><\/span><b>Grid CSS l\u00e0 g\u00ec?<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Grid CSS l\u00e0 m\u1ed9t h\u1ec7 th\u1ed1ng b\u1ed1 c\u1ee5c hai chi\u1ec1u m\u1ea1nh m\u1ebd trong CSS. V\u1edbi Grid, c\u00e1c th\u00e0nh ph\u1ea7n c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c s\u1eafp x\u1ebfp linh ho\u1ea1t trong c\u00e1c h\u00e0ng v\u00e0 c\u1ed9t, t\u1ea1o ra b\u1ed1 c\u1ee5c r\u00f5 r\u00e0ng v\u00e0 d\u1ec5 qu\u1ea3n l\u00fd.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Khi \u0111\u01b0\u1ee3c k\u1ebft h\u1ee3p v\u1edbi c\u00e1c thu\u1ed9c t\u00ednh kh\u00e1c c\u1ee7a CSS nh\u01b0 Flexbox, Grid c\u00f3 th\u1ec3 gi\u00fap nh\u00e0 ph\u00e1t tri\u1ec3n web t\u1ea1o ra c\u00e1c b\u1ed1 c\u1ee5c m\u00e0 tr\u01b0\u1edbc \u0111\u00e2y kh\u00f4ng th\u1ec3 x\u00e2y d\u1ef1ng trong CSS.<\/span><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u0110\u1ecdc th\u00eam: <a href=\"https:\/\/itviec.com\/blog\/flex-css\/\" target=\"_blank\" rel=\"noopener\"><strong>Flex CSS l\u00e0 g\u00ec? Gi\u1ea3i \u0111\u00e1p chi ti\u1ebft 13 thu\u1ed9c t\u00ednh trong Flexbox CSS<\/strong><\/a><\/em><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-grid-flow-la-gi\"><b>Grid flow l\u00e0 g\u00ec?<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Grid flow (lu\u1ed3ng l\u01b0\u1edbi) l\u00e0 c\u00e1ch c\u00e1c ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c t\u1ef1 \u0111\u1ed9ng \u0111\u1eb7t trong b\u1ed1 c\u1ee5c Grid CSS khi nh\u00e0 ph\u00e1t tri\u1ec3n web kh\u00f4ng \u0111\u1ecbnh v\u1ecb r\u00f5 r\u00e0ng ch\u00fang b\u1eb1ng c\u00e1c thu\u1ed9c t\u00ednh \u0111\u1eb7t v\u1ecb tr\u00ed l\u01b0\u1edbi c\u1ee5 th\u1ec3.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Grid flow c\u00f3 gi\u00e1 tr\u1ecb m\u1eb7c \u0111\u1ecbnh theo h\u00e0ng. \u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 c\u00e1c ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c \u0111\u1eb7t trong m\u1ed7i h\u00e0ng m\u1ed9t c\u00e1ch tu\u1ea7n t\u1ef1, l\u1ea5p \u0111\u1ea7y h\u00e0ng ho\u00e0n to\u00e0n tr\u01b0\u1edbc khi chuy\u1ec3n sang h\u00e0ng ti\u1ebfp theo. N\u1ebfu kh\u00f4ng \u0111\u1ee7 ch\u1ed7 trong m\u1ed9t h\u00e0ng, m\u1ed9t h\u00e0ng m\u1edbi s\u1ebd \u0111\u01b0\u1ee3c th\u00eam v\u00e0o.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-c\u1ea5u-truc-c\u1ee7a-grid-css\"><b>C\u1ea5u tr\u00fac c\u1ee7a Grid CSS<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Grid CSS \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng d\u1ef1a tr\u00ean hai th\u00e0nh ph\u1ea7n ch\u00ednh:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Grid container: <\/b><span style=\"font-weight: 400;\">L\u00e0 m\u1ed9t ph\u1ea7n t\u1eed HTML \u0111\u01b0\u1ee3c \u0111\u1ecbnh d\u1ea1ng \u0111\u1ec3 s\u1eed d\u1ee5ng grid layout, \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh b\u1eb1ng c\u00e1ch \u0111\u1eb7t thu\u1ed9c t\u00ednh display th\u00e0nh grid ho\u1eb7c inline-grid.<\/span><\/li>\n\n\n\n<li><b>Grid tracks:<\/b><span style=\"font-weight: 400;\"> L\u00e0 c\u00e1c \u0111\u01b0\u1eddng ngang v\u00e0 d\u1ecdc t\u1ea1o th\u00e0nh c\u1ea5u tr\u00fac c\u1ee7a l\u01b0\u1edbi. Ch\u00fang chia grid container th\u00e0nh c\u00e1c h\u00e0ng v\u00e0 c\u1ed9t. Grid tracks \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh b\u1eb1ng c\u00e1c thu\u1ed9c t\u00ednh grid-template-rows v\u00e0 grid-template-columns.<\/span><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-thu\u1eadt-ng\u1eef-quan-tr\u1ecdng-v\u1ec1-grid-css\"><span class=\"ez-toc-section\" id=\"Cac_thuat_ngu_quan_trong_ve_Grid_CSS\"><\/span><b>C\u00e1c thu\u1eadt ng\u1eef quan tr\u1ecdng v\u1ec1 Grid CSS<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-grid-container\"><b>Grid container<\/b><\/h3>\n\n\n\n<p><b>Grid container <\/b><span style=\"font-weight: 400;\">l\u00e0 ph\u1ea7n t\u1eed cha ch\u1ee9a t\u1ea5t c\u1ea3 th\u00e0nh ph\u1ea7n l\u01b0\u1edbi (grid items). Nh\u00e0 ph\u00e1t tri\u1ec3n web c\u00f3 th\u1ec3 t\u1ea1o m\u1ed9t grid container b\u1eb1ng c\u00e1ch khai b\u00e1o display: grid ho\u1eb7c display: inline-grid tr\u00ean m\u1ed9t ph\u1ea7n t\u1eed. Ngay sau khi th\u1ef1c hi\u1ec7n \u0111i\u1ec1u n\u00e0y, t\u1ea5t c\u1ea3 th\u00e0nh ph\u1ea7n tr\u1ef1c ti\u1ebfp c\u1ee7a ph\u1ea7n t\u1eed \u0111\u00f3 s\u1ebd tr\u1edf th\u00e0nh c\u00e1c grid items.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong v\u00ed d\u1ee5 b\u00ean d\u01b0\u1edbi \u0111\u00e2y, .container ch\u00ednh l\u00e0 grid container.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>\n<p style=\"text-align: left;\"><b>HTML<\/b><\/p>\n<\/td><td><b>CSS<\/b><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">&lt;div class=&#8221;container&#8221;&gt;<\/span>\n<p><span style=\"font-weight: 400;\">&lt;div class=&#8221;item item-1&#8243;&gt; &lt;\/div&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">&lt;div class=&#8221;item item-2&#8243;&gt; &lt;\/div&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">&lt;div class=&#8221;item item-3&#8243;&gt; &lt;\/div&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span><\/p>\n<\/td><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">.container {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&nbsp;&nbsp;display: grid;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-grid-items\"><b>Grid Items<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong Grid CSS, <\/span><b>grid items <\/b><span style=\"font-weight: 400;\">l\u00e0 nh\u1eefng ph\u1ea7n t\u1eed HTML \u0111\u01b0\u1ee3c \u0111\u1eb7t trong grid container v\u00e0 \u0111\u01b0\u1ee3c \u0111\u1ecbnh v\u1ecb theo c\u1ea5u tr\u00fac l\u01b0\u1edbi. N\u00f3i c\u00e1ch kh\u00e1c, grid items l\u00e0 nh\u1eefng n\u1ed9i dung m\u00e0 nh\u00e0 ph\u00e1t tri\u1ec3n web mu\u1ed1n hi\u1ec3n th\u1ecb trong b\u1ed1 c\u1ee5c l\u01b0\u1edbi.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Grid items c\u00f3 th\u1ec3 l\u00e0 b\u1ea5t k\u1ef3 lo\u1ea1i ph\u1ea7n t\u1eed HTML n\u00e0o, bao g\u1ed3m:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Th\u1ebb HTML<\/b><span style=\"font-weight: 400;\">: &lt;div&gt;, &lt;p&gt;, &lt;h1&gt;, &lt;h2&gt;, &lt;img&gt;, &lt;button&gt;, v.v.<\/span><\/li>\n\n\n\n<li><b>Inline content<\/b><span style=\"font-weight: 400;\">: v\u0103n b\u1ea3n, k\u00fd t\u1ef1, v.v.<\/span><\/li>\n\n\n\n<li><b>Flexbox items<\/b><span style=\"font-weight: 400;\">: c\u00e1c ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c b\u1ed1 c\u1ee5c b\u1eb1ng Flexbox Layout Module.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 bi\u1ebfn m\u1ed9t ph\u1ea7n t\u1eed HTML th\u00e0nh grid item, b\u1ea1n c\u1ea7n th\u00eam thu\u1ed9c t\u00ednh display: grid-item v\u00e0o ph\u1ea7n t\u1eed \u0111\u00f3. Tuy nhi\u00ean, \u0111i\u1ec1u n\u00e0y kh\u00f4ng c\u1ea7n thi\u1ebft trong h\u1ea7u h\u1ebft c\u00e1c tr\u01b0\u1eddng h\u1ee3p. Khi m\u1ed9t ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c \u0111\u1eb7t trong grid container, n\u00f3 s\u1ebd t\u1ef1 \u0111\u1ed9ng tr\u1edf th\u00e0nh grid item m\u1eb7c \u0111\u1ecbnh.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-grid-line\"><b>Grid Line<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00e1c \u0111\u01b0\u1eddng ph\u00e2n chia t\u1ea1o n\u00ean c\u1ea5u tr\u00fac c\u1ee7a l\u01b0\u1edbi \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 <\/span><b>\u0111\u01b0\u1eddng l\u01b0\u1edbi<\/b><span style=\"font-weight: 400;\"> (grid lines). Ch\u00fang c\u00f3 th\u1ec3 l\u00e0 \u0111\u01b0\u1eddng d\u1ecdc (grid line column) ho\u1eb7c \u0111\u01b0\u1eddng ngang (grid line row) v\u00e0 n\u1eb1m \u1edf hai b\u00ean c\u1ee7a m\u1ed9t h\u00e0ng ho\u1eb7c c\u1ed9t.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong v\u00ed d\u1ee5 b\u00ean d\u01b0\u1edbi, \u0111\u01b0\u1eddng m\u00e0u v\u00e0ng l\u00e0 m\u1ed9t v\u00ed d\u1ee5 v\u1ec1 \u0111\u01b0\u1eddng l\u01b0\u1edbi c\u1ed9t.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2424\" height=\"1378\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-line-vippro.jpg\" alt=\"grid css\" class=\"wp-image-72283\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-line-vippro.jpg 2424w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-line-vippro-300x171.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-line-vippro-1600x910.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-line-vippro-200x114.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-line-vippro-100x57.jpg 100w\" sizes=\"auto, (max-width: 2424px) 100vw, 2424px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-grid-track\"><b>Grid Track<\/b><\/h3>\n\n\n\n<p><b>Grid Track<\/b><span style=\"font-weight: 400;\"> l\u00e0 kho\u1ea3ng tr\u1ed1ng gi\u1eefa hai \u0111\u01b0\u1eddng l\u01b0\u1edbi li\u1ec1n k\u1ec1. Ngo\u00e0i ra, n\u00f3 c\u00f2n l\u00e0 \u0111\u01a1n v\u1ecb \u0111\u1ecbnh ngh\u0129a c\u1ea5u tr\u00fac v\u00e0 k\u00edch th\u01b0\u1edbc c\u1ee7a c\u00e1c c\u1ed9t v\u00e0 h\u00e0ng trong l\u01b0\u1edbi. B\u1ea1n c\u00f3 th\u1ec3 coi ch\u00fang nh\u01b0 c\u00e1c c\u1ed9t ho\u1eb7c h\u00e0ng c\u1ee7a l\u01b0\u1edbi. V\u00ed d\u1ee5 trong \u1ea3nh b\u00ean d\u01b0\u1edbi, grid track ch\u00ednh l\u00e0 c\u1ed9t c\u1ee7a l\u01b0\u1edbi (v\u00f9ng \u0111\u01b0\u1ee3c t\u00f4 m\u00e0u v\u00e0ng).<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2332\" height=\"1384\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-track-vippro.jpg\" alt=\"grid css\" class=\"wp-image-72284\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-track-vippro.jpg 2332w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-track-vippro-300x178.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-track-vippro-1600x950.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-track-vippro-200x119.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-track-vippro-100x59.jpg 100w\" sizes=\"auto, (max-width: 2332px) 100vw, 2332px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-grid-area\"><b>Grid Area<\/b><\/h3>\n\n\n\n<p><b>Grid Area <\/b><span style=\"font-weight: 400;\">l\u00e0 m\u1ed9t khu v\u1ef1c \u0111\u01b0\u1ee3c t\u1ea1o ra t\u1eeb vi\u1ec7c k\u1ebft h\u1ee3p c\u00e1c grid tracks theo c\u1ea3 h\u00e0ng v\u00e0 c\u1ed9t trong CSS Grid Layout. M\u1ed9t v\u00f9ng l\u01b0\u1edbi ph\u1ea3i c\u00f3 h\u00ecnh ch\u1eef nh\u1eadt nh\u01b0 h\u00ecnh \u1ea3nh v\u00ed d\u1ee5 b\u00ean d\u01b0\u1edbi, kh\u00f4ng th\u1ec3 c\u00f3 h\u00ecnh ch\u1eef L ho\u1eb7c b\u1ea5t k\u1ef3 h\u00ecnh n\u00e0o kh\u00e1c. K\u00edch th\u01b0\u1edbc c\u1ee7a grid area \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh b\u1edfi c\u00e1c grid tracks t\u1ea1o th\u00e0nh n\u00f3. V\u1ecb tr\u00ed c\u1ee7a grid area \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh b\u1edfi c\u00e1c grid lines v\u00e0 grid tracks.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2328\" height=\"1356\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-area-vippro.jpg\" alt=\"grid css\" class=\"wp-image-72285\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-area-vippro.jpg 2328w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-area-vippro-300x175.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-area-vippro-1600x932.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-area-vippro-200x116.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-area-vippro-100x58.jpg 100w\" sizes=\"auto, (max-width: 2328px) 100vw, 2328px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-grid-cells\"><b>Grid Cells<\/b><\/h3>\n\n\n\n<p><b>Grid Cell <\/b><span style=\"font-weight: 400;\">l\u00e0 \u0111\u01a1n v\u1ecb nh\u1ecf nh\u1ea5t trong m\u1ed9t l\u01b0\u1edbi, \u0111\u00f3 l\u00e0 kho\u1ea3ng tr\u1ed1ng \u0111\u01b0\u1ee3c bao quanh b\u1edfi hai \u0111\u01b0\u1eddng l\u01b0\u1edbi h\u00e0ng k\u1ec1 nhau v\u00e0 hai \u0111\u01b0\u1eddng l\u01b0\u1edbi c\u1ed9t k\u1ec1 nhau. N\u00f3i c\u00e1ch kh\u00e1c, grid cell l\u00e0 \u00f4 \u0111\u01b0\u1ee3c t\u1ea1o ra b\u1edfi c\u00e1c grid line.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2248\" height=\"1324\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-cell-vippro.jpg\" alt=\"grid css\" class=\"wp-image-72286\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-cell-vippro.jpg 2248w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-cell-vippro-300x177.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-cell-vippro-1600x942.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-cell-vippro-200x118.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-cell-vippro-100x59.jpg 100w\" sizes=\"auto, (max-width: 2248px) 100vw, 2248px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-gutters\"><b>Gutters<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Kho\u1ea3ng tr\u1ed1ng gi\u1eefa c\u00e1c \u00f4 l\u01b0\u1edbi \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 khe h\u1edf (gutters) hay \u0111\u01b0\u1eddng ng\u0103n (alleys). Nh\u00e0 ph\u00e1t tri\u1ec3n web c\u00f3 th\u1ec3 t\u1ea1o c\u00e1c khe h\u1edf n\u00e0y b\u1eb1ng thu\u1ed9c t\u00ednh <strong>column-gap<\/strong> v\u00e0 <strong>row-gap,<\/strong> ho\u1eb7c thu\u1ed9c t\u00ednh vi\u1ebft t\u1eaft <strong>gap<\/strong>.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2426\" height=\"500\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-css-gutters-vippro.png\" alt=\"grid css\" class=\"wp-image-72288\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-css-gutters-vippro.png 2426w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-css-gutters-vippro-300x62.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-css-gutters-vippro-1600x330.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-css-gutters-vippro-200x41.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-css-gutters-vippro-100x21.png 100w\" sizes=\"auto, (max-width: 2426px) 100vw, 2426px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-nesting-grids\"><b>Nesting grids<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Nesting grids (l\u01b0\u1edbi l\u1ed3ng nhau) l\u00e0 k\u1ef9 thu\u1eadt s\u1eed d\u1ee5ng nhi\u1ec1u grid container b\u00ean trong nhau \u0111\u1ec3 t\u1ea1o ra b\u1ed1 c\u1ee5c ph\u1ee9c t\u1ea1p v\u00e0 linh ho\u1ea1t h\u01a1n.&nbsp;<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2442\" height=\"1402\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-css-nesting-grids-vippro.png\" alt=\"grid css\" class=\"wp-image-72287\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-css-nesting-grids-vippro.png 2442w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-css-nesting-grids-vippro-300x172.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-css-nesting-grids-vippro-1600x919.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-css-nesting-grids-vippro-200x115.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-css-nesting-grids-vippro-100x57.png 100w\" sizes=\"auto, (max-width: 2442px) 100vw, 2442px\" \/><\/figure>\n\n\n\n<p><i><span style=\"font-weight: 400;\"><\/span><\/i><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-thu\u1ed9c-tinh-c\u1ee7a-grid-container\"><span class=\"ez-toc-section\" id=\"Cac_thuoc_tinh_cua_Grid_container\"><\/span><b>C\u00e1c thu\u1ed9c t\u00ednh c\u1ee7a Grid container<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-display\"><b>display<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh display trong CSS x\u00e1c \u0111\u1ecbnh ph\u1ea7n t\u1eed l\u00e0 m\u1ed9t grid container v\u00e0 thi\u1ebft l\u1eadp m\u1ed9t ng\u1eef c\u1ea3nh \u0111\u1ecbnh d\u1ea1ng l\u01b0\u1edbi m\u1edbi cho n\u1ed9i dung c\u1ee7a n\u00f3.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>display: grid | inline-grid;<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00e1c gi\u00e1 tr\u1ecb:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>grid:<\/b><span style=\"font-weight: 400;\"> T\u1ea1o m\u1ed9t grid container c\u1ea5p kh\u1ed1i (block-level grid).<\/span><\/li>\n\n\n\n<li><b>inline-grid: <\/b><span style=\"font-weight: 400;\">T\u1ea1o m\u1ed9t grid container c\u1ea5p d\u00f2ng (inline-level grid).<\/span><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-grid-template-columns-va-grid-template-rows\"><b>grid-template-columns v\u00e0 grid-template-rows<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh grid-template-columns v\u00e0 grid-template-rows x\u00e1c \u0111\u1ecbnh c\u00e1c c\u1ed9t v\u00e0 h\u00e0ng c\u1ee7a l\u01b0\u1edbi b\u1eb1ng m\u1ed9t danh s\u00e1ch c\u00e1c gi\u00e1 tr\u1ecb c\u00e1ch nhau b\u1eb1ng d\u1ea5u c\u00e1ch. C\u00e1c gi\u00e1 tr\u1ecb n\u00e0y \u0111\u1ea1i di\u1ec7n cho k\u00edch th\u01b0\u1edbc c\u1ee7a \u0111\u01b0\u1eddng l\u01b0\u1edbi, v\u00e0 kho\u1ea3ng tr\u1ed1ng gi\u1eefa ch\u00fang \u0111\u1ea1i di\u1ec7n cho \u0111\u01b0\u1eddng l\u01b0\u1edbi.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>grid-template-columns: ...&nbsp; ...;\n\ngrid-template-rows: ...&nbsp; ...;<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00e1c gi\u00e1 tr\u1ecb c\u00f3 th\u1ec3 bao g\u1ed3m:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>&lt;track-size&gt;:<\/b><span style=\"font-weight: 400;\"> c\u00f3 th\u1ec3 l\u00e0 m\u1ed9t \u0111\u1ed9 d\u00e0i, m\u1ed9t t\u1ef7 l\u1ec7 ph\u1ea7n tr\u0103m ho\u1eb7c m\u1ed9t ph\u1ea7n c\u1ee7a kho\u1ea3ng tr\u1ed1ng trong l\u01b0\u1edbi s\u1eed d\u1ee5ng \u0111\u01a1n v\u1ecb fr.<\/span><\/li>\n\n\n\n<li><b>&lt;line-name&gt;: <\/b><span style=\"font-weight: 400;\">m\u1ed9t t\u00ean t\u00f9y \u00fd do nh\u00e0 ph\u00e1t tri\u1ec3n web ch\u1ecdn.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00e1c grid lines t\u1ef1 \u0111\u1ed9ng \u0111\u01b0\u1ee3c \u0111\u00e1nh s\u1ed1 th\u1ee9 t\u1ef1 t\u0103ng d\u1ea7n, v\u1edbi -1 l\u00e0 \u0111\u01b0\u1eddng cu\u1ed1i c\u00f9ng.&nbsp;<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1860\" height=\"1426\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-css-column-row-01-vippro.jpg\" alt=\"grid css\" class=\"wp-image-72291\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-css-column-row-01-vippro.jpg 1860w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-css-column-row-01-vippro-300x230.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-css-column-row-01-vippro-1565x1200.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-css-column-row-01-vippro-200x153.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-css-column-row-01-vippro-100x77.jpg 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-css-column-row-01-vippro-587x450.jpg 587w\" sizes=\"auto, (max-width: 1860px) 100vw, 1860px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">B\u1ea1n c\u00f3 th\u1ec3 \u0111\u1eb7t t\u00ean ri\u00eang cho c\u00e1c \u0111\u01b0\u1eddng l\u01b0\u1edbi b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng c\u00fa ph\u00e1p d\u1ea5u ngo\u1eb7c vu\u00f4ng <strong>[t\u00ean]<\/strong>. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5: <code>[header-start], [main-content-end]<\/code><\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Khi \u0111\u1eb7t t\u00ean cho c\u00e1c \u0111\u01b0\u1eddng l\u01b0\u1edbi, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng nhi\u1ec1u t\u00ean cho c\u00f9ng m\u1ed9t \u0111\u01b0\u1eddng l\u01b0\u1edbi b\u1eb1ng c\u00e1ch \u0111\u1eb7t ch\u00fang trong d\u1ea5u ngo\u1eb7c vu\u00f4ng v\u00e0 ph\u00e2n c\u00e1ch b\u1edfi d\u1ea5u c\u00e1ch. V\u00ed d\u1ee5:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">grid-template-columns: &#91;first] 40px &#91;line2] 50px &#91;line3] auto &#91;col4-start] 50px &#91;five] 40px &#91;end];<\/span>\n\n<span style=\"font-weight: 400;\">grid-template-rows: &#91;row1-start] 25% &#91;row1-end] 100px &#91;third-line] auto &#91;last-line];<\/span><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1834\" height=\"1420\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-css-column-row-02-vippro.jpg\" alt=\"grid css\" class=\"wp-image-72292\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-css-column-row-02-vippro.jpg 1834w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-css-column-row-02-vippro-300x232.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-css-column-row-02-vippro-1550x1200.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-css-column-row-02-vippro-200x155.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-css-column-row-02-vippro-100x77.jpg 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-css-column-row-02-vippro-581x450.jpg 581w\" sizes=\"auto, (max-width: 1834px) 100vw, 1834px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-grid-template-areas\"><b>grid-template-areas<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh grid-template-areas x\u00e1c \u0111\u1ecbnh b\u1ed1 c\u1ee5c l\u01b0\u1edbi b\u1eb1ng c\u00e1ch tham chi\u1ebfu \u0111\u1ebfn t\u00ean c\u1ee7a c\u00e1c v\u00f9ng l\u01b0\u1edbi \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh b\u1eb1ng thu\u1ed9c t\u00ednh grid-area. L\u1eb7p l\u1ea1i t\u00ean c\u1ee7a m\u1ed9t grid area s\u1ebd khi\u1ebfn n\u1ed9i dung c\u1ee7a v\u00f9ng \u0111\u00f3 tr\u1ea3i r\u1ed9ng tr\u00ean nhi\u1ec1u \u00f4.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>grid-template-areas:&nbsp;\n\n&nbsp;&nbsp;\"&lt;grid-area-1&gt; &lt;grid-area-2&gt; &lt;grid-area-3&gt;\"\n\n&nbsp;&nbsp;\"&lt;grid-area-4&gt; &lt;grid-area-5&gt; &lt;grid-area-6&gt;\"\n\n&nbsp;&nbsp;...;<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">M\u1ed7i d\u00f2ng trong thu\u1ed9c t\u00ednh grid-template-areas \u0111\u1ea1i di\u1ec7n cho m\u1ed9t h\u00e0ng trong l\u01b0\u1edbi. M\u1ed7i gi\u00e1 tr\u1ecb trong m\u1ed7i d\u00f2ng \u0111\u1ea1i di\u1ec7n cho m\u1ed9t \u00f4 l\u01b0\u1edbi trong h\u00e0ng \u0111\u00f3.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00e1c gi\u00e1 tr\u1ecb c\u00f3 th\u1ec3 l\u00e0:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\"><strong>&lt;grid-area-name&gt;<\/strong>: t\u00ean c\u1ee7a m\u1ed9t v\u00f9ng l\u01b0\u1edbi \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh b\u1eb1ng thu\u1ed9c t\u00ednh grid-area.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\"><strong>\u201c.\u201d<\/strong>: d\u1ea5u ch\u1ea5m bi\u1ec3u th\u1ecb m\u1ed9t \u00f4 l\u01b0\u1edbi tr\u1ed1ng.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\"><strong>none<\/strong>: kh\u00f4ng c\u00f3 v\u00f9ng l\u01b0\u1edbi n\u00e0o \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">.item-a {<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;grid-area: header;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">.item-b {<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;grid-area: main;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">.item-c {<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;grid-area: sidebar;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">.item-d {<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;grid-area: footer;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">.container {<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;display: grid;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;grid-template-columns: 50px 50px 50px 50px;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;grid-template-rows: auto;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;grid-template-areas:&nbsp;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;\"header header header header\"<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;\"main main . sidebar\"<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;\"footer footer footer footer\";<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2020\" height=\"1410\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-template-area-vippro.jpg\" alt=\"grid css\" class=\"wp-image-72293\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-template-area-vippro.jpg 2020w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-template-area-vippro-300x209.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-template-area-vippro-1600x1117.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-template-area-vippro-200x140.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-template-area-vippro-100x70.jpg 100w\" sizes=\"auto, (max-width: 2020px) 100vw, 2020px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-grid-template\"><b>grid-template<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">grid-template l\u00e0 m\u1ed9t c\u00e1ch vi\u1ebft t\u1eaft \u0111\u1ec3 thi\u1ebft l\u1eadp c\u00e1c thu\u1ed9c t\u00ednh grid-template-rows, grid-template-columns v\u00e0 grid-template-areas trong m\u1ed9t khai b\u00e1o duy nh\u1ea5t.<\/span><span style=\"font-weight: 400;\">&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>grid-template: none | &lt;grid-template-rows&gt; \/ &lt;grid-template-columns&gt;;<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00e1c gi\u00e1 tr\u1ecb:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>none:<\/b><span style=\"font-weight: 400;\"> \u0110\u1eb7t t\u1ea5t c\u1ea3 ba thu\u1ed9c t\u00ednh v\u1ec1 gi\u00e1 tr\u1ecb ban \u0111\u1ea7u c\u1ee7a ch\u00fang.<\/span><\/li>\n\n\n\n<li><b>&lt;grid-template-rows&gt; ho\u1eb7c &lt;grid-template-columns&gt;:<\/b><span style=\"font-weight: 400;\"> \u0110\u1eb7t grid-template-columns v\u00e0 grid-template-rows th\u00e0nh c\u00e1c gi\u00e1 tr\u1ecb \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh t\u01b0\u01a1ng \u1ee9ng v\u00e0 \u0111\u1eb7t grid-template-areas th\u00e0nh none.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n\n\n\n<p><b>grid-template<\/b><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">.grid-container {<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;display: grid;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;grid-template: repeat(3, 100px) \/ repeat(2, 1fr);<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\"><b>Khai b\u00e1o ri\u00eang l\u1ebb<\/b><\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">grid-template-rows: repeat(3, 100px);<\/span>\n\n<span style=\"font-weight: 400;\">grid-template-columns: repeat(2, 1fr);<\/span><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-column-gap-va-row-gap-grid-column-gap-va-grid-row-gap\"><b>column-gap v\u00e0 row-gap, grid-column-gap v\u00e0 grid-row-gap<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00e1c thu\u1ed9c t\u00ednh column-gap v\u00e0 row-gap, grid-column-gap v\u00e0 grid-row-gap x\u00e1c \u0111\u1ecbnh k\u00edch th\u01b0\u1edbc c\u1ee7a grid lines. B\u1ea1n c\u00f3 th\u1ec3 h\u00ecnh dung n\u00f3 gi\u1ed1ng nh\u01b0 vi\u1ec7c thi\u1ebft l\u1eadp gutters gi\u1eefa c\u00e1c c\u1ed9t\/h\u00e0ng. &lt;line-size&gt; l\u00e0 gi\u00e1 tr\u1ecb c\u1ee7a thu\u1ed9c t\u00ednh n\u00e0y.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><i><span style=\"font-weight: 400;\">&nbsp;&nbsp;<\/span><\/i><span style=\"font-weight: 400;\">\/* standard *\/<\/span>\n\n&nbsp;&nbsp;column-gap: &lt;line-size&gt;;\n\n&nbsp;&nbsp;row-gap: &lt;line-size&gt;;\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;\/* old *\/<\/span>\n\n&nbsp;&nbsp;grid-column-gap: &lt;line-size&gt;;\n\n&nbsp;&nbsp;grid-row-gap: &lt;line-size&gt;;<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Khi s\u1eed d\u1ee5ng column-gap v\u00e0 row-gap, b\u1ea1n ch\u1ec9 c\u00f3 th\u1ec3 thi\u1ebft l\u1eadp k\u00edch th\u01b0\u1edbc c\u1ed1 \u0111\u1ecbnh cho kho\u1ea3ng c\u00e1ch gi\u1eefa c\u00e1c c\u1ed9t v\u00e0 h\u00e0ng. Trong khi \u0111\u00f3, thu\u1ed9c t\u00ednh grid-column-gap v\u00e0 grid-row-gap cung c\u1ea5p nhi\u1ec1u t\u00ednh linh ho\u1ea1t h\u01a1n cho vi\u1ec7c x\u00e1c \u0111\u1ecbnh kho\u1ea3ng c\u00e1ch gi\u1eefa c\u00e1c \u00f4 l\u01b0\u1edbi. Ngo\u00e0i vi\u1ec7c thi\u1ebft l\u1eadp k\u00edch th\u01b0\u1edbc c\u1ed1 \u0111\u1ecbnh, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng c\u00e1c gi\u00e1 tr\u1ecb kh\u00e1c nh\u01b0 fr, minmax(), auto.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">.container {<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;grid-template-columns: 100px 50px 100px;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;grid-template-rows: 80px auto 80px;&nbsp;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;column-gap: 10px;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;row-gap: 15px;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1814\" height=\"1402\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-gap-vippro.jpg\" alt=\"grid css\" class=\"wp-image-72294\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-gap-vippro.jpg 1814w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-gap-vippro-300x232.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-gap-vippro-1553x1200.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-gap-vippro-200x155.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-gap-vippro-100x77.jpg 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-gap-vippro-582x450.jpg 582w\" sizes=\"auto, (max-width: 1814px) 100vw, 1814px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-gap-va-grid-gap\"><b>gap v\u00e0 grid-gap<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh gap l\u00e0 m\u1ed9t c\u00e1ch vi\u1ebft t\u1eaft ti\u1ec7n l\u1ee3i h\u01a1n cho grid-gap. C\u1ea3 hai thu\u1ed9c t\u00ednh \u0111\u1ec1u c\u00f3 c\u00f9ng ch\u1ee9c n\u0103ng. B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng \u0111\u01a1n v\u1ecb \u0111o chi\u1ec1u d\u00e0i nh\u01b0 pixel (px), em, rem,&#8230; \u0111\u1ec3 x\u00e1c \u0111\u1ecbnh k\u00edch th\u01b0\u1edbc c\u1ee7a kho\u1ea3ng tr\u1ed1ng.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&nbsp;&nbsp;\/* standard *\/<\/span>\n\ngap: &lt;grid-row-gap&gt; &lt;grid-column-gap&gt;;\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;\/* old *\/<\/span>\n\ngrid-gap: &lt;grid-row-gap&gt; &lt;grid-column-gap&gt;;<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">&lt;grid-row-gap&gt; &lt;grid-column-gap&gt; l\u00e0 c\u00e1c gi\u00e1 tr\u1ecb \u0111\u1ed9 d\u00e0i, x\u00e1c \u0111\u1ecbnh k\u00edch th\u01b0\u1edbc c\u1ee7a kho\u1ea3ng tr\u1ed1ng theo th\u1ee9 t\u1ef1: kho\u1ea3ng tr\u1ed1ng gi\u1eefa c\u00e1c h\u00e0ng tr\u01b0\u1edbc, kho\u1ea3ng tr\u1ed1ng gi\u1eefa c\u00e1c c\u1ed9t sau.<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">N\u1ebfu ch\u1ec9 cung c\u1ea5p m\u1ed9t gi\u00e1 tr\u1ecb cho gap, n\u00f3 s\u1ebd \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng cho c\u1ea3 kho\u1ea3ng tr\u1ed1ng gi\u1eefa c\u00e1c h\u00e0ng v\u00e0 c\u1ed9t.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">N\u1ebfu cung c\u1ea5p hai gi\u00e1 tr\u1ecb, gi\u00e1 tr\u1ecb \u0111\u1ea7u ti\u00ean s\u1ebd x\u00e1c \u0111\u1ecbnh kho\u1ea3ng tr\u1ed1ng gi\u1eefa c\u00e1c h\u00e0ng v\u00e0 gi\u00e1 tr\u1ecb th\u1ee9 hai s\u1ebd x\u00e1c \u0111\u1ecbnh kho\u1ea3ng tr\u1ed1ng gi\u1eefa c\u00e1c c\u1ed9t.<\/span><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-justify-items\"><b>justify-items<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">justify-items l\u00e0 thu\u1ed9c t\u00ednh \u0111\u01b0\u1ee3c \u0111\u1eb7t tr\u00ean grid container \u0111\u1ec3 x\u00e1c \u0111\u1ecbnh c\u00e1ch c\u0103n ch\u1ec9nh c\u00e1c grid item theo chi\u1ec1u ngang. Thu\u1ed9c t\u00ednh n\u00e0y \u00e1p d\u1ee5ng cho t\u1ea5t c\u1ea3 c\u00e1c grid item b\u00ean trong grid container.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&nbsp;justify-items: start | end | center | stretch;<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong \u0111\u00f3:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>start<\/b><span style=\"font-weight: 400;\">: C\u0103n ch\u1ec9nh c\u00e1c grid item s\u00e1t v\u1edbi c\u1ea1nh \u0111\u1ea7u c\u1ee7a \u00f4 l\u01b0\u1edbi c\u1ee7a ch\u00fang.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">justify-items: start;<\/span><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2912\" height=\"1114\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-items-start-vippro.jpg\" alt=\"grid css\" class=\"wp-image-72295\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-items-start-vippro.jpg 2912w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-items-start-vippro-300x115.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-items-start-vippro-1600x612.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-items-start-vippro-200x77.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-items-start-vippro-100x38.jpg 100w\" sizes=\"auto, (max-width: 2912px) 100vw, 2912px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>end<\/b><span style=\"font-weight: 400;\">: C\u0103n ch\u1ec9nh c\u00e1c grid item s\u00e1t v\u1edbi c\u1ea1nh cu\u1ed1i c\u1ee7a \u00f4 l\u01b0\u1edbi c\u1ee7a ch\u00fang.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">justify-items: end;<\/span><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2914\" height=\"1152\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-items-end-vippro.jpg\" alt=\"grid css\" class=\"wp-image-72296\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-items-end-vippro.jpg 2914w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-items-end-vippro-300x119.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-items-end-vippro-1600x633.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-items-end-vippro-200x79.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-items-end-vippro-100x40.jpg 100w\" sizes=\"auto, (max-width: 2914px) 100vw, 2914px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\"> <\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>center<\/b><span style=\"font-weight: 400;\">: C\u0103n ch\u1ec9nh c\u00e1c grid item v\u00e0o gi\u1eefa \u00f4 l\u01b0\u1edbi c\u1ee7a ch\u00fang.<\/span><\/li>\n<\/ul>\n\n\n\n<p>C\u00fa ph\u00e1p:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">justify-items: center; <\/span><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2916\" height=\"1132\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-items-center-vippro.jpg\" alt=\"grid css\" class=\"wp-image-72301\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-items-center-vippro.jpg 2916w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-items-center-vippro-300x116.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-items-center-vippro-1600x621.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-items-center-vippro-200x78.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-items-center-vippro-100x39.jpg 100w\" sizes=\"auto, (max-width: 2916px) 100vw, 2916px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>stretch<\/b><span style=\"font-weight: 400;\">: L\u00e0m cho c\u00e1c grid item tr\u1ea3i r\u1ed9ng to\u00e0n b\u1ed9 chi\u1ec1u r\u1ed9ng c\u1ee7a \u00f4 l\u01b0\u1edbi.<\/span><\/li>\n<\/ul>\n\n\n\n<p>C\u00fa ph\u00e1p:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">justify-items: stretch; <\/span><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2908\" height=\"1128\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-items-stretch-vippro.png\" alt=\"grid css\" class=\"wp-image-72302\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-items-stretch-vippro.png 2908w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-items-stretch-vippro-300x116.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-items-stretch-vippro-1600x621.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-items-stretch-vippro-200x78.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-items-stretch-vippro-100x39.png 100w\" sizes=\"auto, (max-width: 2908px) 100vw, 2908px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-align-items\"><b>align-items<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh align-items trong Grid CSS d\u00f9ng \u0111\u1ec3 c\u0103n ch\u1ec9nh c\u00e1c grid item theo tr\u1ee5c d\u1ecdc (d\u1ecdc theo c\u1ed9t), ng\u01b0\u1ee3c l\u1ea1i v\u1edbi justify-items c\u0103n ch\u1ec9nh theo tr\u1ee5c ngang (d\u1ecdc theo h\u00e0ng).&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>align-items: start | end | center | stretch;<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00e1c gi\u00e1 tr\u1ecb c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>start:<\/b><span style=\"font-weight: 400;\"> C\u0103n ch\u1ec9nh c\u00e1c grid item s\u00e1t v\u1edbi c\u1ea1nh \u0111\u1ea7u c\u1ee7a \u00f4 l\u01b0\u1edbi c\u1ee7a ch\u00fang.<\/span><\/li>\n<\/ul>\n\n\n\n<p>C\u00fa ph\u00e1p:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">align-items: start;<\/span><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2924\" height=\"1150\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-items-start-vippro.png\" alt=\"grid css\" class=\"wp-image-72306\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-items-start-vippro.png 2924w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-items-start-vippro-300x118.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-items-start-vippro-1600x629.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-items-start-vippro-200x79.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-items-start-vippro-100x39.png 100w\" sizes=\"auto, (max-width: 2924px) 100vw, 2924px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>end: <\/b><span style=\"font-weight: 400;\">C\u0103n ch\u1ec9nh c\u00e1c grid item s\u00e1t v\u1edbi c\u1ea1nh cu\u1ed1i c\u1ee7a \u00f4 l\u01b0\u1edbi c\u1ee7a ch\u00fang.<\/span><\/li>\n<\/ul>\n\n\n\n<p>C\u00fa ph\u00e1p:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">align-items: end;<\/span><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2918\" height=\"1136\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-items-end-vippro.png\" alt=\"grid css\" class=\"wp-image-72305\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-items-end-vippro.png 2918w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-items-end-vippro-300x117.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-items-end-vippro-1600x623.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-items-end-vippro-200x78.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-items-end-vippro-100x39.png 100w\" sizes=\"auto, (max-width: 2918px) 100vw, 2918px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\"> <\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>center:<\/b><span style=\"font-weight: 400;\"> C\u0103n ch\u1ec9nh c\u00e1c grid item v\u00e0o gi\u1eefa \u00f4 l\u01b0\u1edbi c\u1ee7a ch\u00fang.<\/span><\/li>\n<\/ul>\n\n\n\n<p>C\u00fa ph\u00e1p:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">align-items: center;&nbsp;<\/span><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2914\" height=\"1110\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-items-center-vippro.png\" alt=\"grid css\" class=\"wp-image-72304\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-items-center-vippro.png 2914w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-items-center-vippro-300x114.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-items-center-vippro-1600x609.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-items-center-vippro-200x76.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-items-center-vippro-100x38.png 100w\" sizes=\"auto, (max-width: 2914px) 100vw, 2914px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>stretch (m\u1eb7c \u0111\u1ecbnh):<\/b><span style=\"font-weight: 400;\"> L\u00e0m cho c\u00e1c grid item tr\u1ea3i r\u1ed9ng to\u00e0n b\u1ed9 chi\u1ec1u cao c\u1ee7a \u00f4 l\u01b0\u1edbi.<\/span><\/li>\n<\/ul>\n\n\n\n<p>C\u00fa ph\u00e1p:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">align-items: stretch;&nbsp;<\/span><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2922\" height=\"1104\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-items-stretch-vippro.png\" alt=\"grid css\" class=\"wp-image-72303\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-items-stretch-vippro.png 2922w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-items-stretch-vippro-300x113.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-items-stretch-vippro-1600x605.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-items-stretch-vippro-200x76.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-items-stretch-vippro-100x38.png 100w\" sizes=\"auto, (max-width: 2922px) 100vw, 2922px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>baseline:<\/b><span style=\"font-weight: 400;\"> C\u0103n ch\u1ec9nh c\u00e1c grid item d\u1ef1a tr\u00ean \u0111\u01b0\u1eddng baseline c\u1ee7a n\u1ed9i dung v\u0103n b\u1ea3n. Trong \u0111\u00f3, first baseline l\u00e0 s\u1eed d\u1ee5ng \u0111\u01b0\u1eddng baseline c\u1ee7a d\u00f2ng \u0111\u1ea7u ti\u00ean trong tr\u01b0\u1eddng h\u1ee3p v\u0103n b\u1ea3n c\u00f3 nhi\u1ec1u d\u00f2ng, last baseline l\u00e0 s\u1eed d\u1ee5ng \u0111\u01b0\u1eddng baseline c\u1ee7a d\u00f2ng cu\u1ed1i c\u00f9ng trong tr\u01b0\u1eddng h\u1ee3p v\u0103n b\u1ea3n c\u00f3 nhi\u1ec1u d\u00f2ng.<\/span><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-place-items\"><b>place-items<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh place-items l\u00e0 m\u1ed9t c\u00e1ch vi\u1ebft t\u1eaft \u0111\u1ec3 thi\u1ebft l\u1eadp c\u1ea3 hai thu\u1ed9c t\u00ednh align-items v\u00e0 justify-items trong m\u1ed9t khai b\u00e1o duy nh\u1ea5t.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>place-items: &lt;align-items&gt; &lt;justify-items&gt;;<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong c\u00fa ph\u00e1p n\u00e0y, gi\u00e1 tr\u1ecb \u0111\u1ea7u ti\u00ean \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh l\u00e0 align-items, gi\u00e1 tr\u1ecb th\u1ee9 hai \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh l\u00e0 justify-items. N\u1ebfu kh\u00f4ng cung c\u1ea5p gi\u00e1 tr\u1ecb th\u1ee9 hai, gi\u00e1 tr\u1ecb \u0111\u1ea7u ti\u00ean s\u1ebd \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng cho c\u1ea3 hai thu\u1ed9c t\u00ednh.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-justify-content\"><b>justify-content<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">justify-content d\u00f9ng \u0111\u1ec3 c\u0103n ch\u1ec9nh to\u00e0n b\u1ed9 grid items theo tr\u1ee5c ngang (d\u1ecdc theo h\u00e0ng) b\u00ean trong grid container. Thu\u1ed9c t\u00ednh n\u00e0y th\u01b0\u1eddng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng khi t\u1ed5ng k\u00edch th\u01b0\u1edbc c\u1ee7a c\u00e1c grid item nh\u1ecf h\u01a1n k\u00edch th\u01b0\u1edbc c\u1ee7a grid container.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>justify-content: start | end | center | stretch | space-around | space-between | space-evenly;<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00e1c gi\u00e1 tr\u1ecb trong c\u00fa ph\u00e1p tr\u00ean c\u00f3 \u00fd ngh\u0129a nh\u01b0 sau:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>start<\/b><span style=\"font-weight: 400;\">: C\u0103n ch\u1ec9nh l\u01b0\u1edbi s\u00e1t v\u1edbi c\u1ea1nh \u0111\u1ea7u c\u1ee7a grid container.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">justify-content: start; <\/span><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2418\" height=\"1212\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-start-vippro.jpg\" alt=\"grid css\" class=\"wp-image-72307\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-start-vippro.jpg 2418w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-start-vippro-300x150.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-start-vippro-1600x802.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-start-vippro-200x100.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-start-vippro-100x50.jpg 100w\" sizes=\"auto, (max-width: 2418px) 100vw, 2418px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>end: <\/b><span style=\"font-weight: 400;\">C\u0103n ch\u1ec9nh l\u01b0\u1edbi s\u00e1t v\u1edbi c\u1ea1nh cu\u1ed1i c\u1ee7a grid container.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">justify-content: end;<\/span><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2402\" height=\"1202\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-end-vippro.jpg\" alt=\"grid css\" class=\"wp-image-72308\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-end-vippro.jpg 2402w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-end-vippro-300x150.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-end-vippro-1600x801.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-end-vippro-200x100.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-end-vippro-100x50.jpg 100w\" sizes=\"auto, (max-width: 2402px) 100vw, 2402px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>center: <\/b><span style=\"font-weight: 400;\">C\u0103n ch\u1ec9nh l\u01b0\u1edbi v\u00e0o gi\u1eefa grid container.<\/span><\/li>\n<\/ul>\n\n\n\n<p>C\u00fa ph\u00e1p:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">justify-content: center;&nbsp;<\/span><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2384\" height=\"1198\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-center-vippro.jpg\" alt=\"grid css\" class=\"wp-image-72309\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-center-vippro.jpg 2384w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-center-vippro-300x151.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-center-vippro-1600x804.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-center-vippro-200x101.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-center-vippro-100x50.jpg 100w\" sizes=\"auto, (max-width: 2384px) 100vw, 2384px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>stretch (m\u1eb7c \u0111\u1ecbnh):<\/b><span style=\"font-weight: 400;\"> T\u1ef1 \u0111\u1ed9ng \u0111i\u1ec1u ch\u1ec9nh k\u00edch th\u01b0\u1edbc c\u1ee7a c\u00e1c grid item \u0111\u1ec3 l\u01b0\u1edbi tr\u1ea3i r\u1ed9ng to\u00e0n b\u1ed9 chi\u1ec1u r\u1ed9ng c\u1ee7a grid container.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">justify-content: stretch;<\/span><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2384\" height=\"1218\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-stretch-vippro.jpg\" alt=\"grid css\" class=\"wp-image-72310\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-stretch-vippro.jpg 2384w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-stretch-vippro-300x153.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-stretch-vippro-1600x817.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-stretch-vippro-200x102.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-stretch-vippro-100x51.jpg 100w\" sizes=\"auto, (max-width: 2384px) 100vw, 2384px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\"> <\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>space-around:<\/b><span style=\"font-weight: 400;\"> Ph\u00e2n b\u1ed5 kho\u1ea3ng c\u00e1ch \u0111\u1ec1u gi\u1eefa c\u00e1c grid item, v\u1edbi kho\u1ea3ng c\u00e1ch b\u1eb1ng m\u1ed9t n\u1eeda \u1edf hai \u0111\u1ea7u.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">justify-content: space-around;<\/span><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2380\" height=\"1200\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-space-around-vippro.jpg\" alt=\"grid css\" class=\"wp-image-72311\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-space-around-vippro.jpg 2380w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-space-around-vippro-300x151.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-space-around-vippro-1600x807.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-space-around-vippro-200x101.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-space-around-vippro-100x50.jpg 100w\" sizes=\"auto, (max-width: 2380px) 100vw, 2380px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\"> <\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>space-between:<\/b><span style=\"font-weight: 400;\"> Ph\u00e2n b\u1ed5 kho\u1ea3ng c\u00e1ch \u0111\u1ec1u gi\u1eefa c\u00e1c grid item, kh\u00f4ng c\u00f3 kho\u1ea3ng c\u00e1ch \u1edf hai \u0111\u1ea7u.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">justify-content: space-between;<\/span><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2338\" height=\"1190\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-space-between-vippro.jpg\" alt=\"grid css\" class=\"wp-image-72312\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-space-between-vippro.jpg 2338w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-space-between-vippro-300x153.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-space-between-vippro-1600x814.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-space-between-vippro-200x102.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-space-between-vippro-100x51.jpg 100w\" sizes=\"auto, (max-width: 2338px) 100vw, 2338px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>space-evenly:<\/b><span style=\"font-weight: 400;\"> Ph\u00e2n b\u1ed5 kho\u1ea3ng c\u00e1ch \u0111\u1ec1u gi\u1eefa t\u1ea5t c\u1ea3 c\u00e1c grid item, bao g\u1ed3m c\u1ea3 hai \u0111\u1ea7u.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p: <\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">justify-content: space-evenly;&nbsp;<\/span><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2346\" height=\"1196\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-space-evenly-vippro.jpg\" alt=\"grid css\" class=\"wp-image-72313\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-space-evenly-vippro.jpg 2346w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-space-evenly-vippro-300x153.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-space-evenly-vippro-1600x816.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-space-evenly-vippro-200x102.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-content-space-evenly-vippro-100x51.jpg 100w\" sizes=\"auto, (max-width: 2346px) 100vw, 2346px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-align-content\"><b>align-content<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">align-content c\u0103n ch\u1ec9nh to\u00e0n b\u1ed9 l\u01b0\u1edbi theo chi\u1ec1u d\u1ecdc b\u00ean trong grid container. Thu\u1ed9c t\u00ednh n\u00e0y ch\u1ec9 c\u00f3 t\u00e1c d\u1ee5ng khi t\u1ed5ng k\u00edch th\u01b0\u1edbc c\u1ee7a c\u00e1c grid item nh\u1ecf h\u01a1n k\u00edch th\u01b0\u1edbc c\u1ee7a grid container.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>align-content: start | end | center | stretch | space-around | space-between | space-evenly;<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong \u0111\u00f3:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>start<\/b><span style=\"font-weight: 400;\">: C\u0103n ch\u1ec9nh l\u01b0\u1edbi s\u00e1t v\u1edbi c\u1ea1nh \u0111\u1ea7u c\u1ee7a grid container.<\/span><\/li>\n<\/ul>\n\n\n\n<p>C\u00fa ph\u00e1p:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">align-content: start;<\/span><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1452\" height=\"1302\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-start-vippro.jpg\" alt=\"grid css\" class=\"wp-image-72320\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-start-vippro.jpg 1452w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-start-vippro-300x269.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-start-vippro-1338x1200.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-start-vippro-200x179.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-start-vippro-100x90.jpg 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-start-vippro-502x450.jpg 502w\" sizes=\"auto, (max-width: 1452px) 100vw, 1452px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>end:<\/b><span style=\"font-weight: 400;\"> C\u0103n ch\u1ec9nh l\u01b0\u1edbi s\u00e1t v\u1edbi c\u1ea1nh cu\u1ed1i c\u1ee7a grid container.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-weight: 400;\">align-content: end;&nbsp;<\/span><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1456\" height=\"1316\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-end-vippro.jpg\" alt=\"grid css\" class=\"wp-image-72319\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-end-vippro.jpg 1456w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-end-vippro-300x271.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-end-vippro-1328x1200.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-end-vippro-200x181.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-end-vippro-100x90.jpg 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-end-vippro-498x450.jpg 498w\" sizes=\"auto, (max-width: 1456px) 100vw, 1456px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>center:<\/b><span style=\"font-weight: 400;\"> C\u0103n ch\u1ec9nh l\u01b0\u1edbi v\u00e0o gi\u1eefa grid container.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">align-content: center;<\/span><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1458\" height=\"1318\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-center-vippro.jpg\" alt=\"grid css\" class=\"wp-image-72318\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-center-vippro.jpg 1458w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-center-vippro-300x271.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-center-vippro-1327x1200.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-center-vippro-200x181.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-center-vippro-100x90.jpg 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-center-vippro-498x450.jpg 498w\" sizes=\"auto, (max-width: 1458px) 100vw, 1458px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>stretch (m\u1eb7c \u0111\u1ecbnh): <\/b><span style=\"font-weight: 400;\">Thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc c\u00e1c grid item \u0111\u1ec3 l\u01b0\u1edbi tr\u1ea3i r\u1ed9ng to\u00e0n b\u1ed9 chi\u1ec1u cao c\u1ee7a grid container.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">align-content: stretch;&nbsp;<\/span><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1460\" height=\"1312\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-stretch-vippro.jpg\" alt=\"grid css\" class=\"wp-image-72317\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-stretch-vippro.jpg 1460w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-stretch-vippro-300x270.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-stretch-vippro-1335x1200.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-stretch-vippro-200x180.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-stretch-vippro-100x90.jpg 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-stretch-vippro-501x450.jpg 501w\" sizes=\"auto, (max-width: 1460px) 100vw, 1460px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>space-around:<\/b><span style=\"font-weight: 400;\"> T\u1ea1o kho\u1ea3ng c\u00e1ch \u0111\u1ec1u gi\u1eefa c\u00e1c grid item, v\u1edbi c\u00e1c kho\u1ea3ng c\u00e1ch b\u1eb1ng n\u1eeda k\u00edch th\u01b0\u1edbc \u1edf hai \u0111\u1ea7u.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">align-content: space-around;<\/span><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1450\" height=\"1306\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-space-around-vippro.jpg\" alt=\"grid css\" class=\"wp-image-72316\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-space-around-vippro.jpg 1450w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-space-around-vippro-300x270.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-space-around-vippro-1332x1200.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-space-around-vippro-200x180.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-space-around-vippro-100x90.jpg 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-space-around-vippro-500x450.jpg 500w\" sizes=\"auto, (max-width: 1450px) 100vw, 1450px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>space-between<\/b><span style=\"font-weight: 400;\">: T\u1ea1o kho\u1ea3ng c\u00e1ch \u0111\u1ec1u gi\u1eefa c\u00e1c grid item, kh\u00f4ng c\u00f3 kho\u1ea3ng c\u00e1ch \u1edf hai \u0111\u1ea7u.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">align-content: space-between;<\/span><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1454\" height=\"1298\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-between-vippro.jpg\" alt=\"grid css\" class=\"wp-image-72315\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-between-vippro.jpg 1454w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-between-vippro-300x268.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-between-vippro-1344x1200.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-between-vippro-200x179.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-between-vippro-100x89.jpg 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-between-vippro-504x450.jpg 504w\" sizes=\"auto, (max-width: 1454px) 100vw, 1454px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\"> <\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>space-evenly: <\/b><span style=\"font-weight: 400;\">T\u1ea1o kho\u1ea3ng c\u00e1ch \u0111\u1ec1u gi\u1eefa t\u1ea5t c\u1ea3 c\u00e1c grid item, bao g\u1ed3m c\u1ea3 hai \u0111\u1ea7u.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">align-content: space-evenly;&nbsp;<\/span><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1442\" height=\"1314\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-space-evenly-vippro.jpg\" alt=\"grid css\" class=\"wp-image-72314\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-space-evenly-vippro.jpg 1442w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-space-evenly-vippro-300x273.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-space-evenly-vippro-1317x1200.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-space-evenly-vippro-200x182.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-space-evenly-vippro-100x91.jpg 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-content-space-evenly-vippro-494x450.jpg 494w\" sizes=\"auto, (max-width: 1442px) 100vw, 1442px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-place-content\"><b>place-content<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">place-content l\u00e0 m\u1ed9t c\u00e1ch vi\u1ebft ng\u1eafn g\u1ecdn c\u1ee7a c\u1ea3 hai thu\u1ed9c t\u00ednh align-content v\u00e0 justify-content. Trong c\u00fa ph\u00e1p c\u1ee7a place-content, gi\u00e1 tr\u1ecb \u0111\u1ea7u ti\u00ean \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh l\u00e0 align-content, gi\u00e1 tr\u1ecb th\u1ee9 hai \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh l\u00e0 justify-content. Trong tr\u01b0\u1eddng h\u1ee3p kh\u00f4ng c\u00f3 gi\u00e1 tr\u1ecb th\u1ee9 hai, gi\u00e1 tr\u1ecb \u0111\u1ea7u ti\u00ean s\u1ebd \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng cho c\u1ea3 hai thu\u1ed9c t\u00ednh.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>place-content: &lt;align-content&gt; &lt;justify-content&gt;;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-grid-auto-columns-va-grid-auto-rows\"><b>grid-auto-columns v\u00e0 grid-auto-rows<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh grid-auto-columns v\u00e0 grid-auto-rows c\u00f3 ch\u1ee9c n\u0103ng x\u00e1c \u0111\u1ecbnh k\u00edch th\u01b0\u1edbc c\u1ee7a c\u00e1c auto-generate grid-tracks (c\u00f2n g\u1ecdi l\u00e0 \u0111\u01b0\u1eddng r\u00e3nh l\u01b0\u1edbi \u1ea9n). C\u00e1c grid tracks \u0111\u01b0\u1ee3c t\u1ea1o ra khi c\u00f3 nhi\u1ec1u grid item h\u01a1n s\u1ed1 \u00f4 trong l\u01b0\u1edbi ho\u1eb7c khi m\u1ed9t grid item \u0111\u01b0\u1ee3c \u0111\u1eb7t b\u00ean ngo\u00e0i l\u01b0\u1edbi \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh r\u00f5 r\u00e0ng.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\"><strong>&lt;track-size&gt;<\/strong> l\u00e0 gi\u00e1 tr\u1ecb \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng trong c\u00e1c c\u00fa ph\u00e1p grid-auto-columns ho\u1eb7c grid-auto-rows. Gi\u00e1 tr\u1ecb n\u00e0y c\u00f3 th\u1ec3 l\u00e0 chi\u1ec1u d\u00e0i, t\u1ef7 l\u1ec7 ph\u1ea7n tr\u0103m ho\u1eb7c m\u1ed9t ph\u1ea7n c\u1ee7a kho\u1ea3ng tr\u1ed1ng trong l\u01b0\u1edbi v\u1edbi \u0111\u01a1n v\u1ecb l\u00e0 fr.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>grid-auto-columns: &lt;track-size&gt; ...;\n\ngrid-auto-rows: &lt;track-size&gt; ...;<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">.container {<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;grid-template-columns: 60px 60px;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;grid-template-rows: 90px 90px;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1156\" height=\"1434\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-auto-column-row-60-vippro.jpg\" alt=\"grid css\" class=\"wp-image-72321\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-auto-column-row-60-vippro.jpg 1156w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-auto-column-row-60-vippro-242x300.jpg 242w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-auto-column-row-60-vippro-967x1200.jpg 516w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-auto-column-row-60-vippro-161x200.jpg 161w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-auto-column-row-60-vippro-81x100.jpg 81w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-auto-column-row-60-vippro-363x450.jpg 363w\" sizes=\"auto, (max-width: 1156px) 100vw, 1156px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-grid-auto-flow\"><b>grid-auto-flow<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong Grid CSS, thu\u1ed9c t\u00ednh grid-auto-flow c\u00f3 vai tr\u00f2 \u0111i\u1ec1u ch\u1ec9nh c\u00e1ch s\u1eafp x\u1ebfp c\u00e1c grid item kh\u00f4ng c\u00f3 v\u1ecb tr\u00ed c\u1ee5 th\u1ec3. N\u00f3i m\u1ed9t c\u00e1ch d\u1ec5 hi\u1ec3u h\u01a1n, thu\u1ed9c t\u00ednh n\u00e0y s\u1ebd k\u00edch ho\u1ea1t thu\u1eadt to\u00e1n t\u1ef1 \u0111\u1ed9ng s\u1eafp x\u1ebfp khi b\u1ea1n kh\u00f4ng x\u00e1c \u0111\u1ecbnh v\u1ecb tr\u00ed c\u1ee5 th\u1ec3 cho c\u00e1c grid item.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>grid-auto-flow: row | column | row dense | column dense;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>row (m\u1eb7c \u0111\u1ecbnh):<\/b><span style=\"font-weight: 400;\"> Thu\u1eadt to\u00e1n s\u1ebd l\u1ea5p \u0111\u1ea7y t\u1eebng h\u00e0ng theo th\u1ee9 t\u1ef1, th\u00eam c\u00e1c h\u00e0ng m\u1edbi n\u1ebfu c\u1ea7n.<\/span><\/li>\n\n\n\n<li><b>column<\/b><span style=\"font-weight: 400;\">: Thu\u1eadt to\u00e1n s\u1ebd l\u1ea5p \u0111\u1ea7y t\u1eebng c\u1ed9t theo th\u1ee9 t\u1ef1, th\u00eam c\u00e1c c\u1ed9t m\u1edbi n\u1ebfu c\u1ea7n.<\/span><\/li>\n\n\n\n<li><b>dense<\/b><span style=\"font-weight: 400;\">: Thu\u1eadt to\u00e1n s\u1ebd c\u1ed1 g\u1eafng l\u1ea5p \u0111\u1ea7y c\u00e1c kho\u1ea3ng tr\u1ed1ng tr\u01b0\u1edbc \u0111\u00f3 trong l\u01b0\u1edbi n\u1ebfu sau \u0111\u00f3 xu\u1ea5t hi\u1ec7n c\u00e1c grid item c\u00f3 k\u00edch th\u01b0\u1edbc nh\u1ecf h\u01a1n.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5 \u0111\u1eb7t <strong>grid-auto-flow<\/strong> l\u00e0 <strong>row<\/strong>:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><b>HTML<\/b><\/td><td><b>CSS<\/b><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">&lt;section class=&#8221;container&#8221;&gt;<\/span>\n<p><span style=\"font-weight: 400;\">&nbsp;&nbsp;&lt;div class=&#8221;item-a&#8221;&gt;item-a&lt;\/div&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">&nbsp;&nbsp;&lt;div class=&#8221;item-b&#8221;&gt;item-b&lt;\/div&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">&nbsp;&nbsp;&lt;div class=&#8221;item-c&#8221;&gt;item-c&lt;\/div&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">&nbsp;&nbsp;&lt;div class=&#8221;item-d&#8221;&gt;item-d&lt;\/div&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">&nbsp;&nbsp;&lt;div class=&#8221;item-e&#8221;&gt;item-e&lt;\/div&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">&lt;\/section&gt;<\/span><\/p>\n<\/td><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">.container {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&nbsp;&nbsp;display: grid;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&nbsp;&nbsp;grid-template-columns: 60px 60px 60px 60px 60px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&nbsp;&nbsp;grid-template-rows: 30px 30px;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&nbsp;&nbsp;grid-auto-flow: row;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">.item-a {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&nbsp;&nbsp;grid-column: 1;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&nbsp;&nbsp;grid-row: 1 \/ 3;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">.item-e {<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&nbsp;&nbsp;grid-column: 5;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&nbsp;&nbsp;grid-row: 1 \/ 3;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2924\" height=\"974\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-auto-flow-vippro.jpg\" alt=\"grid css\" class=\"wp-image-72323\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-auto-flow-vippro.jpg 2924w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-auto-flow-vippro-300x100.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-auto-flow-vippro-1600x533.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-auto-flow-vippro-200x67.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-auto-flow-vippro-100x33.jpg 100w\" sizes=\"auto, (max-width: 2924px) 100vw, 2924px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">Ng\u01b0\u1ee3c l\u1ea1i, n\u1ebfu \u0111\u1eb7t <strong>grid-auto-flow<\/strong> th\u00e0nh <strong>column<\/strong>, khi \u0111\u00f3 item-b, item-c v\u00e0 item-d s\u1ebd ch\u1ea3y xu\u1ed1ng c\u00e1c c\u1ed9t nh\u01b0 sau: <\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"2922\" height=\"998\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-auto-flow-column-vippro.jpg\" alt=\"grid css\" class=\"wp-image-72324\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-auto-flow-column-vippro.jpg 2922w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-auto-flow-column-vippro-300x102.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-auto-flow-column-vippro-1600x546.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-auto-flow-column-vippro-200x68.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-auto-flow-column-vippro-100x34.jpg 100w\" sizes=\"auto, (max-width: 2922px) 100vw, 2922px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Xem th\u00eam Vi\u1ec7c l\u00e0m\u00a0<strong><a href=\"https:\/\/itviec.com\/viec-lam-it\/frontend-developer\/ho-chi-minh-hcm?utm_medium=anchor_text_mid&amp;utm_source=blog&amp;utm_campaign=lap_trinh_vien_frontend&amp;utm_content=grid_css\" target=\"_blank\" rel=\"noreferrer noopener\">L\u1eadp tr\u00ecnh vi\u00ean Front-End<\/a><\/strong>\u00a0t\u1ea1i TP. H\u1ed3 Ch\u00ed Minh<br>Xem th\u00eam Vi\u1ec7c l\u00e0m\u00a0<a href=\"https:\/\/itviec.com\/viec-lam-it\/frontend-developer\/ha-noi?utm_medium=anchor_text_mid&amp;utm_source=blog&amp;utm_campaign=lap_trinh_vien_frontend&amp;utm_content=grid_css\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>L\u1eadp tr\u00ecnh vi\u00ean Front-End<\/strong><\/a>\u00a0t\u1ea1i H\u00e0 N\u1ed9i<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-thu\u1ed9c-tinh-c\u1ee7a-grid-item\"><span class=\"ez-toc-section\" id=\"Cac_thuoc_tinh_cua_Grid_Item\"><\/span><b>C\u00e1c thu\u1ed9c t\u00ednh c\u1ee7a Grid Item<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-grid-column-start-grid-column-end-grid-row-start-grid-row-end\"><b>grid-column-start | grid-column-end | grid-row-start |<\/b> <b>grid-row-end<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00e1c thu\u1ed9c t\u00ednh n\u00e0y x\u00e1c \u0111\u1ecbnh v\u1ecb tr\u00ed c\u1ee7a m\u1ed9t ph\u1ea7n t\u1eed trong l\u01b0\u1edbi (grid) b\u1eb1ng c\u00e1ch tham chi\u1ebfu \u0111\u1ebfn c\u00e1c \u0111\u01b0\u1eddng line c\u1ee5 th\u1ec3. <\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>grid-column-start <\/b><span style=\"font-weight: 400;\">v\u00e0 <\/span><b>grid-row-start<\/b><span style=\"font-weight: 400;\"> l\u00e0 \u0111\u01b0\u1eddng line n\u01a1i ph\u1ea7n t\u1eed b\u1eaft \u0111\u1ea7u. <\/span><\/li>\n\n\n\n<li><b>grid-column-end <\/b><span style=\"font-weight: 400;\">v\u00e0 <\/span><b>grid-row-end<\/b><span style=\"font-weight: 400;\"> l\u00e0 \u0111\u01b0\u1eddng line n\u01a1i ph\u1ea7n t\u1eed k\u1ebft th\u00fac.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>grid-column-start: &lt;number&gt; | &lt;name&gt; | span &lt;number&gt; | span &lt;name&gt; | auto;\n\ngrid-column-end: &lt;number&gt; | &lt;name&gt; | span &lt;number&gt; | span &lt;name&gt; | auto;\n\ngrid-row-start: &lt;number&gt; | &lt;name&gt; | span &lt;number&gt; | span &lt;name&gt; | auto;\n\ngrid-row-end: &lt;number&gt; | &lt;name&gt; | span &lt;number&gt; | span &lt;name&gt; | auto;<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong \u0111\u00f3:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>&lt;line&gt;:<\/b><span style=\"font-weight: 400;\"> C\u00f3 th\u1ec3 l\u00e0 gi\u00e1 tr\u1ecb s\u1ed1 &lt;number&gt; \u0111\u1ec3 tham chi\u1ebfu \u0111\u1ebfn \u0111\u01b0\u1eddng line \u0111\u01b0\u1ee3c \u0111\u00e1nh s\u1ed1 th\u1ee9 t\u1ef1, ho\u1eb7c l\u00e0 gi\u00e1 tr\u1ecb t\u00ean &lt;name&gt; \u0111\u1ec3 tham chi\u1ebfu \u0111\u1ebfn \u0111\u01b0\u1eddng line \u0111\u01b0\u1ee3c \u0111\u1eb7t t\u00ean.<\/span><\/li>\n\n\n\n<li><b>span &lt;number&gt;:<\/b><span style=\"font-weight: 400;\"> Ph\u1ea7n t\u1eed s\u1ebd tr\u1ea3i r\u1ed9ng tr\u00ean m\u1ed9t s\u1ed1 \u0111\u01b0\u1eddng line \u0111\u01b0\u1ee3c cung c\u1ea5p.<\/span><\/li>\n\n\n\n<li><b>span &lt;name&gt;: <\/b><span style=\"font-weight: 400;\">Ph\u1ea7n t\u1eed s\u1ebd tr\u1ea3i r\u1ed9ng cho \u0111\u1ebfn khi ch\u1ea1m v\u00e0o \u0111\u01b0\u1eddng line ti\u1ebfp theo c\u00f3 t\u00ean \u0111\u01b0\u1ee3c cung c\u1ea5p.<\/span><\/li>\n\n\n\n<li><b>auto:<\/b><span style=\"font-weight: 400;\"> Bi\u1ec3u th\u1ecb vi\u1ec7c \u0111\u1eb7t v\u1ecb tr\u00ed t\u1ef1 \u0111\u1ed9ng, tr\u1ea3i r\u1ed9ng t\u1ef1 \u0111\u1ed9ng ho\u1eb7c tr\u1ea3i r\u1ed9ng m\u1eb7c \u0111\u1ecbnh m\u1ed9t \u0111\u01b0\u1eddng line.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5 1:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">.item-a {<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;grid-column-start: 2;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;grid-column-end: five;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;grid-row-start: row1-start;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;grid-row-end: 3;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2226\" height=\"1402\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-items-example-1-vippro.jpg\" alt=\"grid css\" class=\"wp-image-72325\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-items-example-1-vippro.jpg 2226w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-items-example-1-vippro-300x189.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-items-example-1-vippro-1600x1008.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-items-example-1-vippro-200x126.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-items-example-1-vippro-100x63.jpg 100w\" sizes=\"auto, (max-width: 2226px) 100vw, 2226px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5 2:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">.item-b {<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;grid-column-start: 1;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;grid-column-end: span col4-start;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;grid-row-start: 2;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;grid-row-end: span 2;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2138\" height=\"1396\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-items-example-2-vippro.jpg\" alt=\"grid css\" class=\"wp-image-72326\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-items-example-2-vippro.jpg 2138w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-items-example-2-vippro-300x196.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-items-example-2-vippro-1600x1045.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-items-example-2-vippro-200x131.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-items-example-2-vippro-100x65.jpg 100w\" sizes=\"auto, (max-width: 2138px) 100vw, 2138px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-grid-column-va-grid-row\"><b>grid-column v\u00e0 grid-row<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">grid-column l\u00e0 thu\u1ed9c t\u00ednh vi\u1ebft t\u1eaft c\u1ee7a grid-column-start v\u00e0 grid-column-end. Ng\u01b0\u1ee3c l\u1ea1i, grid-row l\u00e0 vi\u1ebft t\u1eaft c\u1ee7a grid-row-start v\u00e0 grid-row-end.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>grid-column: &lt;start-line&gt; \/ &lt;end-line&gt; | &lt;start-line&gt; \/ span &lt;value&gt;;\n\ngrid-row: &lt;start-line&gt; \/ &lt;end-line&gt; | &lt;start-line&gt; \/ span &lt;value&gt;;<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong \u0111\u00f3, m\u1ed7i gi\u00e1 tr\u1ecb <strong>&lt;start-line&gt;<\/strong> hay <strong>&lt;end-line&gt;<\/strong> \u0111\u1ec1u ch\u1ea5p nh\u1eadn t\u1ea5t c\u1ea3 gi\u00e1 tr\u1ecb gi\u1ed1ng nh\u01b0 phi\u00ean b\u1ea3n \u0111\u1ea7y \u0111\u1ee7, bao g\u1ed3m c\u1ea3 span.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">.item-c {<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;grid-column: 3 \/ span 2;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;grid-row: third-line \/ 4;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2162\" height=\"1402\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-items-column-row-vippro.jpg\" alt=\"grid css\" class=\"wp-image-72327\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-items-column-row-vippro.jpg 2162w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-items-column-row-vippro-300x195.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-items-column-row-vippro-1600x1038.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-items-column-row-vippro-200x130.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-items-column-row-vippro-100x65.jpg 100w\" sizes=\"auto, (max-width: 2162px) 100vw, 2162px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-grid-area-0\"><b>grid-area<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh n\u00e0y \u0111\u1eb7t t\u00ean cho m\u1ed9t ph\u1ea7n t\u1eed \u0111\u1ec3 n\u00f3 c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c tham chi\u1ebfu b\u1edfi m\u1ed9t m\u1eabu \u0111\u01b0\u1ee3c t\u1ea1o b\u1eb1ng thu\u1ed9c t\u00ednh grid-template-areas. Ngo\u00e0i ra, thu\u1ed9c t\u00ednh n\u00e0y c\u0169ng c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng nh\u01b0 m\u1ed9t c\u00e1ch vi\u1ebft t\u1eaft cho grid-row-start + grid-column-start + grid-row-end + grid-column-end.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>grid-area: &lt;name&gt; | &lt;row-start&gt; \/ &lt;column-start&gt; \/ &lt;row-end&gt; \/ &lt;column-end&gt;;<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong \u0111\u00f3:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>&lt;name&gt; <\/b><span style=\"font-weight: 400;\">l\u00e0 t\u00ean do b\u1ea1n ch\u1ecdn<\/span><\/li>\n\n\n\n<li><b>&lt;row-start&gt; \/ &lt;column-start&gt; \/ &lt;row-end&gt; \/ &lt;column-end&gt;<\/b><span style=\"font-weight: 400;\"> c\u00f3 th\u1ec3 l\u00e0 s\u1ed1 ho\u1eb7c t\u00ean c\u1ee7a c\u00e1c \u0111\u01b0\u1eddng line.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5: \u0110\u1eb7t t\u00ean cho m\u1ed9t ph\u1ea7n t\u1eed<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">.item-d {<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;grid-area: header;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5: Vi\u1ebft t\u1eaft cho grid-row-start + grid-column-start + grid-row-end + grid-column-end<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">.item-d {<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;grid-area: 1 \/ col4-start \/ last-line \/ 6;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2210\" height=\"1410\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-items-area-vippro.jpg\" alt=\"grid css\" class=\"wp-image-72328\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-items-area-vippro.jpg 2210w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-items-area-vippro-300x191.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-items-area-vippro-1600x1021.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-items-area-vippro-200x128.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-items-area-vippro-100x64.jpg 100w\" sizes=\"auto, (max-width: 2210px) 100vw, 2210px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-justify-self\"><b>justify-self<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">justify-self c\u0103n ch\u1ec9nh m\u1ed9t grid item b\u00ean trong m\u1ed9t \u00f4 d\u1ecdc theo tr\u1ee5c inline (kh\u00e1c v\u1edbi align-self c\u0103n ch\u1ec9nh theo tr\u1ee5c block). Gi\u00e1 tr\u1ecb n\u00e0y \u00e1p d\u1ee5ng cho m\u1ed9t grid item n\u1eb1m trong m\u1ed9t \u00f4 \u0111\u01a1n l\u1ebb.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>justify-self: start | end | center | stretch;<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong \u0111\u00f3:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>start:<\/b><span style=\"font-weight: 400;\"> C\u0103n ch\u1ec9nh ph\u1ea7n t\u1eed l\u01b0\u1edbi s\u00e1t v\u1edbi c\u1ea1nh \u0111\u1ea7u c\u1ee7a \u00f4<\/span><\/li>\n<\/ul>\n\n\n\n<p>C\u00fa ph\u00e1p:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">justify-self: start;<\/span><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2912\" height=\"1118\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-self-start-vippro.png\" alt=\"grid css\" class=\"wp-image-72332\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-self-start-vippro.png 2912w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-self-start-vippro-300x115.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-self-start-vippro-1600x614.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-self-start-vippro-200x77.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-self-start-vippro-100x38.png 100w\" sizes=\"auto, (max-width: 2912px) 100vw, 2912px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>end: <\/b><span style=\"font-weight: 400;\">C\u0103n ch\u1ec9nh ph\u1ea7n t\u1eed l\u01b0\u1edbi s\u00e1t v\u1edbi c\u1ea1nh cu\u1ed1i c\u1ee7a \u00f4<\/span><\/li>\n<\/ul>\n\n\n\n<p>C\u00fa ph\u00e1p:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">justify-self: end;<\/span><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2920\" height=\"1112\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-self-end-vippro.png\" alt=\"grid css\" class=\"wp-image-72331\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-self-end-vippro.png 2920w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-self-end-vippro-300x114.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-self-end-vippro-1600x609.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-self-end-vippro-200x76.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-self-end-vippro-100x38.png 100w\" sizes=\"auto, (max-width: 2920px) 100vw, 2920px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\"> <\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>center: <\/b><span style=\"font-weight: 400;\">C\u0103n ch\u1ec9nh ph\u1ea7n t\u1eed l\u01b0\u1edbi v\u00e0o gi\u1eefa \u00f4<\/span><\/li>\n<\/ul>\n\n\n\n<p>C\u00fa ph\u00e1p:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">justify-self: center;<\/span><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"2916\" height=\"1088\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-self-center-vippro.png\" alt=\"grid css\" class=\"wp-image-72330\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-self-center-vippro.png 2916w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-self-center-vippro-300x112.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-self-center-vippro-1600x597.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-self-center-vippro-200x75.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-self-center-vippro-100x37.png 100w\" sizes=\"auto, (max-width: 2916px) 100vw, 2916px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\"> <\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>stretch: <\/b><span style=\"font-weight: 400;\">K\u00e9o d\u00e0i ph\u1ea7n t\u1eed l\u01b0\u1edbi \u0111\u1ec3 l\u1ea5p \u0111\u1ea7y to\u00e0n b\u1ed9 chi\u1ec1u r\u1ed9ng c\u1ee7a \u00f4 (\u0111\u00e2y l\u00e0 gi\u00e1 tr\u1ecb m\u1eb7c \u0111\u1ecbnh)<\/span><\/li>\n<\/ul>\n\n\n\n<p>C\u00fa ph\u00e1p:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">justify-self: stretch; <\/span><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2924\" height=\"1104\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-self-stretch-vippro.png\" alt=\"grid css\" class=\"wp-image-72329\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-self-stretch-vippro.png 2924w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-self-stretch-vippro-300x113.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-self-stretch-vippro-1600x604.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-self-stretch-vippro-200x76.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-justify-self-stretch-vippro-100x38.png 100w\" sizes=\"auto, (max-width: 2924px) 100vw, 2924px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-align-self\"><b>align-self<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">align-self c\u0103n ch\u1ec9nh m\u1ed9t grid item b\u00ean trong m\u1ed9t \u00f4 d\u1ecdc theo tr\u1ee5c block (ng\u01b0\u1ee3c l\u1ea1i v\u1edbi justify-self c\u0103n ch\u1ec9nh theo tr\u1ee5c inline).<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>align-self: start | end | center | stretch;<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong \u0111\u00f3:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>start<\/b><span style=\"font-weight: 400;\">: C\u0103n ch\u1ec9nh n\u1ed9i dung c\u1ee7a ph\u1ea7n t\u1eed l\u01b0\u1edbi s\u00e1t v\u1edbi c\u1ea1nh \u0111\u1ea7u c\u1ee7a \u00f4.<\/span><\/li>\n<\/ul>\n\n\n\n<p>C\u00fa ph\u00e1p:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">align-self: start;&nbsp;<\/span><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2906\" height=\"1122\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-self-start-vippro.png\" alt=\"grid css\" class=\"wp-image-72336\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-self-start-vippro.png 2906w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-self-start-vippro-300x116.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-self-start-vippro-1600x618.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-self-start-vippro-200x77.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-self-start-vippro-100x39.png 100w\" sizes=\"auto, (max-width: 2906px) 100vw, 2906px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\"> <\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>end<\/b><span style=\"font-weight: 400;\">: C\u0103n ch\u1ec9nh n\u1ed9i dung c\u1ee7a ph\u1ea7n t\u1eed l\u01b0\u1edbi s\u00e1t v\u1edbi c\u1ea1nh cu\u1ed1i c\u1ee7a \u00f4.<\/span><\/li>\n<\/ul>\n\n\n\n<p>C\u00fa ph\u00e1p:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">align-self: end;<\/span><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2920\" height=\"1092\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-self-end-vippro.png\" alt=\"grid css\" class=\"wp-image-72335\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-self-end-vippro.png 2920w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-self-end-vippro-300x112.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-self-end-vippro-1600x598.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-self-end-vippro-200x75.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-self-end-vippro-100x37.png 100w\" sizes=\"auto, (max-width: 2920px) 100vw, 2920px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\"> <\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>center<\/b><span style=\"font-weight: 400;\">: C\u0103n ch\u1ec9nh n\u1ed9i dung c\u1ee7a ph\u1ea7n t\u1eed l\u01b0\u1edbi v\u00e0o gi\u1eefa \u00f4.<\/span><\/li>\n<\/ul>\n\n\n\n<p>C\u00fa ph\u00e1p:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">align-self: center;<\/span><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2912\" height=\"1094\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-self-center-vippro.png\" alt=\"grid css\" class=\"wp-image-72334\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-self-center-vippro.png 2912w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-self-center-vippro-300x113.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-self-center-vippro-1600x601.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-self-center-vippro-200x75.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-self-center-vippro-100x38.png 100w\" sizes=\"auto, (max-width: 2912px) 100vw, 2912px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\"> <\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>stretch<\/b><span style=\"font-weight: 400;\">: K\u00e9o d\u00e0i n\u1ed9i dung c\u1ee7a ph\u1ea7n t\u1eed l\u01b0\u1edbi \u0111\u1ec3 l\u1ea5p \u0111\u1ea7y to\u00e0n b\u1ed9 chi\u1ec1u cao c\u1ee7a \u00f4 (\u0111\u00e2y l\u00e0 gi\u00e1 tr\u1ecb m\u1eb7c \u0111\u1ecbnh).<\/span><\/li>\n<\/ul>\n\n\n\n<p>C\u00fa ph\u00e1p:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-weight: 400;\">align-self: stretch;<\/span><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2910\" height=\"1104\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-self-stretch-vippro.png\" alt=\"grid css\" class=\"wp-image-72333\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-self-stretch-vippro.png 2910w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-self-stretch-vippro-300x114.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-self-stretch-vippro-1600x607.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-self-stretch-vippro-200x76.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-align-self-stretch-vippro-100x38.png 100w\" sizes=\"auto, (max-width: 2910px) 100vw, 2910px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\"> <\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-place-self\"><b>place-self<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">place-self l\u00e0 c\u00e1ch vi\u1ebft t\u1eaft \u0111\u1ec3 thi\u1ebft l\u1eadp c\u1ea3 hai thu\u1ed9c t\u00ednh align-self v\u00e0 justify-self ch\u1ec9 trong m\u1ed9t khai b\u00e1o.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>place-self: &lt;align-self&gt; \/ &lt;justify-self&gt;;<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong c\u00fa ph\u00e1p n\u00e0y, gi\u00e1 tr\u1ecb \u0111\u1ea7u ti\u00ean s\u1ebd thi\u1ebft l\u1eadp <strong>align-self<\/strong>, gi\u00e1 tr\u1ecb th\u1ee9 hai s\u1ebd thi\u1ebft l\u1eadp <strong>justify-self<\/strong>. N\u1ebfu thi\u1ebfu gi\u00e1 tr\u1ecb th\u1ee9 hai, gi\u00e1 tr\u1ecb \u0111\u1ea7u ti\u00ean s\u1ebd \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng cho c\u1ea3 hai thu\u1ed9c t\u00ednh.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-cau-h\u1ecfi-th\u01b0\u1eddng-g\u1eb7p-v\u1ec1-grid-css\"><span class=\"ez-toc-section\" id=\"Cac_cau_hoi_thuong_gap_ve_Grid_CSS\"><\/span><b>C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 Grid CSS<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-l\u1ee3i-ich-c\u1ee7a-vi\u1ec7c-s\u1eed-d\u1ee5ng-grid-css-la-gi\"><b>L\u1ee3i \u00edch c\u1ee7a vi\u1ec7c s\u1eed d\u1ee5ng Grid CSS l\u00e0 g\u00ec?<\/b><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>L\u00e0m \u0111a d\u1ea1ng b\u1ed1 c\u1ee5c web: <\/b><span style=\"font-weight: 400;\">Nh\u1edd s\u1ef1 linh ho\u1ea1t c\u1ee7a n\u00f3, Grid CSS cho ph\u00e9p t\u1ea1o ra h\u1ea7u nh\u01b0 m\u1ecdi lo\u1ea1i b\u1ed1 c\u1ee5c m\u00e0 nh\u00e0 thi\u1ebft k\u1ebf mong mu\u1ed1n. M\u1eb7c d\u00f9 Grid CSS c\u0103n ch\u1ec9nh c\u00e1c y\u1ebfu t\u1ed1 trang theo c\u1ed9t v\u00e0 h\u00e0ng gi\u1ed1ng nh\u01b0 b\u1ea3ng, nh\u01b0ng n\u00f3 kh\u00f4ng b\u1ecb gi\u1edbi h\u1ea1n b\u1edfi c\u1ea5u tr\u00fac n\u1ed9i dung c\u1ee5 th\u1ec3. \u0110i\u1ec1u n\u00e0y gi\u00fap t\u1ea1o ra nhi\u1ec1u b\u1ed1 c\u1ee5c trang web \u0111a d\u1ea1ng v\u00e0 phong ph\u00fa h\u01a1n so v\u1edbi ch\u1ec9 s\u1eed d\u1ee5ng b\u1ea3ng.<\/span><\/li>\n\n\n\n<li><b>T\u01b0\u01a1ng th\u00edch v\u1edbi nhi\u1ec1u thi\u1ebft b\u1ecb: <\/b><span style=\"font-weight: 400;\">B\u1ed1 c\u1ee5c Grid CSS c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng th\u00edch \u1ee9ng v\u1edbi c\u00e1c thay \u0111\u1ed5i v\u1ec1 thi\u1ebft b\u1ecb, kh\u00f4ng gian v\u00e0 h\u01b0\u1edbng m\u00e0 kh\u00f4ng c\u1ea7n thay \u0111\u1ed5i ng\u1eef ngh\u0129a trong n\u1ed9i dung. C\u00e1c ph\u1ea7n t\u1eed l\u01b0\u1edbi c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c s\u1eafp x\u1ebfp l\u1ea1i &#8211; b\u1ea5t k\u1ec3 th\u1ee9 t\u1ef1 ngu\u1ed3n c\u1ee7a ch\u00fang &#8211; \u0111\u1ec3 ph\u00f9 h\u1ee3p v\u1edbi ng\u1eef c\u1ea3nh m\u00e0 kh\u00f4ng c\u1ea7n thay \u0111\u1ed5i m\u00e3 HTML.<\/span><\/li>\n\n\n\n<li><b>Lo\u1ea1i b\u1ecf nhu c\u1ea7u t\u00ednh to\u00e1n ph\u1ee9c t\u1ea1p: <\/b><span style=\"font-weight: 400;\">T\u00ednh n\u0103ng \u0111\u1eb7t t\u1ef1 \u0111\u1ed9ng trong Grid CSS cho ph\u00e9p l\u1ea5p \u0111\u1ea7y kh\u00f4ng gian tr\u1ed1ng, lo\u1ea1i b\u1ecf nhu c\u1ea7u t\u00ednh to\u00e1n ph\u1ee9c t\u1ea1p, th\u1eadm ch\u00ed cho ph\u00e9p b\u1ea1n ch\u1ed3ng c\u00e1c m\u1ee5c khi c\u1ea7n, \u0111i\u1ec1u m\u00e0 ch\u1eafc ch\u1eafn kh\u00f4ng th\u1ec3 th\u1ef1c hi\u1ec7n v\u1edbi b\u1ea3ng.<\/span><\/li>\n\n\n\n<li><b>C\u1ea3i thi\u1ec7n kh\u1ea3 n\u0103ng truy c\u1eadp web: <\/b><span style=\"font-weight: 400;\">Grid CSS gi\u00fap c\u1ea3i thi\u1ec7n kh\u1ea3 n\u0103ng truy c\u1eadp c\u1ee7a trang web b\u1eb1ng c\u00e1ch cho ph\u00e9p c\u1ea5u tr\u00fac n\u1ed9i dung \u0111\u01b0\u1ee3c th\u1ec3 hi\u1ec7n r\u00f5 r\u00e0ng h\u01a1n. \u0110i\u1ec1u n\u00e0y gi\u00fap ng\u01b0\u1eddi d\u00f9ng, \u0111\u1eb7c bi\u1ec7t l\u00e0 nh\u1eefng ng\u01b0\u1eddi d\u00f9ng h\u1ed7 tr\u1ee3 c\u00f4ng ngh\u1ec7, d\u1ec5 d\u00e0ng hi\u1ec3u v\u00e0 \u0111i\u1ec1u h\u01b0\u1edbng trang web.<\/span><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-grid-layout-va-flexbox-co-gi-khac-nhau\"><b>Grid layout v\u00e0 Flexbox c\u00f3 g\u00ec kh\u00e1c nhau?<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">B\u1ed1 c\u1ee5c Grid l\u00e0 h\u1ec7 th\u1ed1ng hai chi\u1ec1u, c\u00f3 th\u1ec3 x\u1eed l\u00fd \u0111\u1ed3ng th\u1eddi c\u00e1c c\u1ed9t v\u00e0 h\u00e0ng. Ng\u01b0\u1ee3c l\u1ea1i, Flexbox l\u00e0 h\u1ec7 th\u1ed1ng b\u1ed1 c\u1ee5c m\u1ed9t chi\u1ec1u, ch\u1ee7 y\u1ebfu \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 c\u0103n ch\u1ec9nh c\u00e1c m\u1ee5c theo m\u1ed9t h\u01b0\u1edbng duy nh\u1ea5t.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1522\" height=\"872\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-vs-flexbox-vippro.jpg\" alt=\"grid css\" class=\"wp-image-72346\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-vs-flexbox-vippro.jpg 1522w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-vs-flexbox-vippro-300x172.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-vs-flexbox-vippro-700x401.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-vs-flexbox-vippro-200x115.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/grid-vs-flexbox-vippro-100x57.jpg 100w\" sizes=\"auto, (max-width: 1522px) 100vw, 1522px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">Grid layout l\u00e0 h\u1ec7 th\u1ed1ng b\u1ed1 c\u1ee5c ph\u1ed5 bi\u1ebfn nh\u1ea5t trong CSS hi\u1ec7n nay, v\u00ec n\u00f3 cho ph\u00e9p t\u1ea1o ra k\u00edch th\u01b0\u1edbc \u00f4 (track) c\u1ed1 \u0111\u1ecbnh v\u00e0 linh ho\u1ea1t. Flexbox ph\u00f9 h\u1ee3p nh\u1ea5t \u0111\u1ec3 c\u0103n ch\u1ec9nh c\u00e1c m\u1ee5c trong m\u1ed9t v\u00f9ng ch\u1ee9a v\u00e0 ph\u00e2n ph\u1ed1i kho\u1ea3ng tr\u1ed1ng \u0111\u1ed3ng \u0111\u1ec1u gi\u1eefa ch\u00fang.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Ngo\u00e0i ra, Grid layout v\u00e0 Flexbox c\u0169ng kh\u00e1c nhau \u1edf tr\u01b0\u1eddng h\u1ee3p s\u1eed d\u1ee5ng. N\u00ean s\u1eed d\u1ee5ng Grid layout cho c\u00e1c b\u1ed1 c\u1ee5c ph\u1ee9c t\u1ea1p v\u1edbi nhi\u1ec1u ph\u1ea7n t\u1eed, c\u1ea7n \u0111i\u1ec1u ch\u1ec9nh k\u00edch th\u01b0\u1edbc v\u00e0 v\u1ecb tr\u00ed chi ti\u1ebft ho\u1eb7c c\u1ea7n x\u00e2y d\u1ef1ng giao di\u1ec7n \u0111\u00e1p \u1ee9ng cao.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong khi \u0111\u00f3, n\u00ean s\u1eed d\u1ee5ng Flexbox cho c\u00e1c b\u1ed1 c\u1ee5c \u0111\u01a1n gi\u1ea3n, c\u1ea7n s\u1eafp x\u1ebfp c\u00e1c ph\u1ea7n t\u1eed theo m\u1ed9t chi\u1ec1u, \u0111i\u1ec1u ch\u1ec9nh kho\u1ea3ng c\u00e1ch linh ho\u1ea1t ho\u1eb7c t\u1ea1o b\u1ed1 c\u1ee5c cho c\u00e1c thi\u1ebft b\u1ecb di \u0111\u1ed9ng.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-nen-h\u1ecdc-flexbox-hay-grid-css\"><b>N\u00ean h\u1ecdc Flexbox hay Grid CSS?<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u1ea3 Flexbox v\u00e0 Grid CSS \u0111\u1ec1u l\u00e0 nh\u1eefng c\u00f4ng c\u1ee5 h\u1eefu \u00edch \u0111\u1ed1i v\u1edbi c\u00e1c nh\u00e0 ph\u00e1t tri\u1ec3n front-end. B\u1ea1n c\u00f3 th\u1ec3 b\u1eaft \u0111\u1ea7u b\u1eb1ng vi\u1ec7c hi\u1ec3u v\u00e0 n\u1eafm \u0111\u01b0\u1ee3c nh\u1eefng k\u1ef9 thu\u1eadt c\u01a1 b\u1ea3n c\u1ee7a c\u1ea3 hai, sau \u0111\u00f3 \u01b0u ti\u00ean h\u1ecdc t\u1eadp d\u1ef1a tr\u00ean nhu c\u1ea7u d\u1ef1 \u00e1n v\u00e0 m\u1ee5c ti\u00eau ngh\u1ec1 nghi\u1ec7p. Vi\u1ec7c th\u00e0nh th\u1ea1o c\u1ea3 Flexbox v\u00e0 CSS Grid s\u1ebd gi\u00fap b\u1ea1n t\u1ea1o ra c\u00e1c b\u1ed1 c\u1ee5c \u0111\u1eb9p m\u1eaft, \u0111\u00e1p \u1ee9ng m\u1ecdi y\u00eau c\u1ea7u v\u00e0 n\u00e2ng cao k\u1ef9 n\u0103ng c\u1ee7a b\u1ea1n v\u1edbi t\u01b0 c\u00e1ch l\u00e0 m\u1ed9t nh\u00e0 ph\u00e1t tri\u1ec3n front-end.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-k\u1ebft-lu\u1eadn-grid-css\"><span class=\"ez-toc-section\" id=\"Ket_luan_Grid_CSS\"><\/span><strong>K\u1ebft lu\u1eadn Grid CSS<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u1edbi nh\u1eefng th\u00f4ng tin chi ti\u1ebft trong b\u00e0i vi\u1ebft b\u00ean tr\u00ean, ITviec hy v\u1ecdng b\u1ea1n \u0111\u00e3 hi\u1ec3u v\u00e0 n\u1eafm ch\u1eafc nh\u1eefng ki\u1ebfn th\u1ee9c n\u1ec1n t\u1ea3ng nh\u1ea5t v\u1ec1 Grid CSS. Ch\u00fac b\u1ea1n s\u1edbm th\u00e0nh th\u1ea1o thu\u1ed9c t\u00ednh n\u00e0y v\u00e0 \u00e1p d\u1ee5ng th\u00e0nh c\u00f4ng cho trang web c\u1ee7a m\u00ecnh nh\u00e9.<\/span><\/p>\n\n\n\n<p class=\"has-text-align-center\">B\u1ea1n th\u1ea5y b\u00e0i vi\u1ebft hay v\u00e0 h\u1eefu \u00edch? \u0110\u1eebng ng\u1ea1i Share v\u1edbi b\u1ea1n b\u00e8 v\u00e0 \u0111\u1ed3ng nghi\u1ec7p nh\u00e9.<br>V\u00e0 nhanh tay tham kh\u1ea3o\u00a0<strong><a href=\"https:\/\/itviec.com\/viec-lam-it\/?utm_medium=anchor_text_low&amp;utm_source=blog&amp;utm_campaign=viec_lam_it&amp;utm_content=grid_css\" target=\"_blank\" rel=\"noreferrer noopener\">vi\u1ec7c l\u00e0m IT<\/a><\/strong>\u00a0\u201cch\u1ea5t\u201d tr\u00ean ITviec!<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Grid l\u00e0 m\u1ed9t h\u1ec7 th\u1ed1ng l\u01b0\u1edbi hai chi\u1ec1u trong CSS, \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 b\u1ed1 tr\u00ed c\u00e1c khu v\u1ef1c ch\u00ednh c\u1ee7a trang ho\u1eb7c c\u00e1c th\u00e0nh ph\u1ea7n trong giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng (UI). Trong b\u00e0i vi\u1ebft n\u00e0y, ITviec s\u1ebd gi\u1edbi thi\u1ec7u v\u1ec1 thu\u1ed9c t\u00ednh Grid CSS d\u01b0\u1edbi nh\u1eefng g\u00f3c nh\u00ecn \u0111\u01a1n gi\u1ea3n v\u00e0 d\u1ec5 hi\u1ec3u nh\u1ea5t [&hellip;]<\/p>\n","protected":false},"author":213,"featured_media":72338,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"categories":[109],"tags":[],"class_list":["post-72280","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-chuyen-mon-it"],"blocksy_meta":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.8 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Grid CSS: C\u1ea9m nang s\u1eed d\u1ee5ng Grid CSS c\u01a1 b\u1ea3n - ITviec Blog<\/title>\n<meta name=\"description\" content=\"Grid CSS kh\u00e1c g\u00ec so v\u1edbi Flexbox? H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng \u0111\u00fang c\u00e1c thu\u1ed9c t\u00ednh grid-templates cho Grid Container, justify-self cho Grid Items.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itviec.com\/blog\/grid-css\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Grid CSS: C\u1ea9m nang s\u1eed d\u1ee5ng Grid CSS c\u01a1 b\u1ea3n\" \/>\n<meta property=\"og:description\" content=\"Grid l\u00e0 m\u1ed9t h\u1ec7 th\u1ed1ng l\u01b0\u1edbi hai chi\u1ec1u trong CSS, \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 b\u1ed1 tr\u00ed c\u00e1c khu v\u1ef1c ch\u00ednh c\u1ee7a trang ho\u1eb7c c\u00e1c th\u00e0nh ph\u1ea7n trong giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng (UI).\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/grid-css\/\" \/>\n<meta property=\"og:site_name\" content=\"ITviec Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ITviec\" \/>\n<meta property=\"article:published_time\" content=\"2024-06-05T23:11:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-31T10:38:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/Thumbnail-GRID-CSS-vippro.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"790\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Linh Trao\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ITviec\" \/>\n<meta name=\"twitter:site\" content=\"@ITviec\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Linh Trao\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"31 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Grid CSS: C\u1ea9m nang s\u1eed d\u1ee5ng Grid CSS c\u01a1 b\u1ea3n - ITviec Blog","description":"Grid CSS kh\u00e1c g\u00ec so v\u1edbi Flexbox? H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng \u0111\u00fang c\u00e1c thu\u1ed9c t\u00ednh grid-templates cho Grid Container, justify-self cho Grid Items.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/itviec.com\/blog\/grid-css\/","og_locale":"vi_VN","og_type":"article","og_title":"Grid CSS: C\u1ea9m nang s\u1eed d\u1ee5ng Grid CSS c\u01a1 b\u1ea3n","og_description":"Grid l\u00e0 m\u1ed9t h\u1ec7 th\u1ed1ng l\u01b0\u1edbi hai chi\u1ec1u trong CSS, \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 b\u1ed1 tr\u00ed c\u00e1c khu v\u1ef1c ch\u00ednh c\u1ee7a trang ho\u1eb7c c\u00e1c th\u00e0nh ph\u1ea7n trong giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng (UI).","og_url":"https:\/\/itviec.com\/blog\/grid-css\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2024-06-05T23:11:19+00:00","article_modified_time":"2025-07-31T10:38:28+00:00","og_image":[{"width":1500,"height":790,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/Thumbnail-GRID-CSS-vippro.png","type":"image\/png"}],"author":"Linh Trao","twitter_card":"summary_large_image","twitter_creator":"@ITviec","twitter_site":"@ITviec","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Linh Trao","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"31 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/grid-css\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/grid-css\/"},"author":{"name":"Linh Trao","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/6d1bcbfa05475cbc5a2eaf0727501a16"},"headline":"Grid CSS: C\u1ea9m nang s\u1eed d\u1ee5ng Grid CSS c\u01a1 b\u1ea3n","datePublished":"2024-06-05T23:11:19+00:00","dateModified":"2025-07-31T10:38:28+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/grid-css\/"},"wordCount":5815,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/grid-css\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/Thumbnail-GRID-CSS-vippro.png","articleSection":["Chuy\u00ean m\u00f4n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/grid-css\/","url":"https:\/\/itviec.com\/blog\/grid-css\/","name":"Grid CSS: C\u1ea9m nang s\u1eed d\u1ee5ng Grid CSS c\u01a1 b\u1ea3n - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/grid-css\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/grid-css\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/Thumbnail-GRID-CSS-vippro.png","datePublished":"2024-06-05T23:11:19+00:00","dateModified":"2025-07-31T10:38:28+00:00","description":"Grid CSS kh\u00e1c g\u00ec so v\u1edbi Flexbox? H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng \u0111\u00fang c\u00e1c thu\u1ed9c t\u00ednh grid-templates cho Grid Container, justify-self cho Grid Items.","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/grid-css\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/grid-css\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/grid-css\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/Thumbnail-GRID-CSS-vippro.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/Thumbnail-GRID-CSS-vippro.png","width":1500,"height":790,"caption":"grid css"},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/grid-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Chuy\u00ean m\u00f4n IT","item":"https:\/\/itviec.com\/blog\/chuyen-mon-it\/"},{"@type":"ListItem","position":2,"name":"Grid CSS: C\u1ea9m nang s\u1eed d\u1ee5ng Grid CSS c\u01a1 b\u1ea3n"}]},{"@type":"WebSite","@id":"https:\/\/itviec.com\/blog\/#website","url":"https:\/\/itviec.com\/blog\/","name":"ITviec Blog","description":"IT Jobs &amp; People in Vietnam","publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itviec.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/itviec.com\/blog\/#organization","name":"ITviec","url":"https:\/\/itviec.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","width":1800,"height":1800,"caption":"ITviec"},"image":{"@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ITviec","https:\/\/x.com\/ITviec","https:\/\/www.linkedin.com\/company\/itviec","https:\/\/www.youtube.com\/channel\/UCYthAQ3bcGr57M_ag5gHDvQ"]},{"@type":"Person","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/6d1bcbfa05475cbc5a2eaf0727501a16","name":"Linh Trao","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/trao-thi-tung-linh-author-e1709892478113-100x100.jpg","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/trao-thi-tung-linh-author-e1709892478113-100x100.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/trao-thi-tung-linh-author-e1709892478113-100x100.jpg","caption":"Linh Trao"},"url":"https:\/\/itviec.com\/blog\/author\/linh-trao\/"}]}},"_links":{"self":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/72280","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/users\/213"}],"replies":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/comments?post=72280"}],"version-history":[{"count":5,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/72280\/revisions"}],"predecessor-version":[{"id":90247,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/72280\/revisions\/90247"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/72338"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=72280"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=72280"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=72280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}