Trình tạo bố trí CSS Grid

CSS Grid Layout la mot he thong layout hai chieu manh me, cho phep ban sap xep cac phan tu dong thoi trong hang va cot. Khac voi Flexbox chi xu ly mot huong tai mot thoi diem, Grid cho ban kiem soat hoan toan ca hai truc. Cac thuoc tinh chinh bao gom grid-template-columns de dinh nghia cot, grid-template-rows de hang, gap de khoang cach va grid-area de vi tri cac phan tu trong cac vung duoc dat ten.

Su dung thanh truot Columns de dat so cot (1 den 12). Su dung thanh truot Rows de so hang (1 den 12). Dieu chinh thanh truot Gap de kiem soat khoang cach giua cac o (0 den 32px). Vung xem truoc hien thi luoi truc tuyen voi cac o duoc danh so. Khi hai long, hay sao chep ma CSS da tao va dan vao du an cua ban.

grid-template-columns va grid-template-rows dinh nghia kich thuoc track. Ham repeat() tao cac track bang nhau, vi du repeat(3, 1fr) tao ba cot bang nhau. Don vi fr phan bo khong gian co san theo ti le. gap dat khoang cach giua hang va cot. Neu can, ban co the dat gia tri khac cho row-gap va column-gap.

Layout Holy Grail: header 3 cot, noi dung chinh voi thanh ben. The dashboard: repeat(auto-fill, minmax(250px, 1fr)) tao luoi the responsive. Hero toan rong voi noi dung phia duoi: mot cot trai dai qua tat ca hang. Layout tap chi: ket hop span bang grid-column va grid-row cho kich thuoc o da dang.

Su dung auto-fill hoac auto-fit voi minmax() de tao luoi responsive linh hoat khong can media queries. Ket hop voi clamp() cho kich thuoc linh hoat. Dat chieu rong toi thieu bang minmax(200px, 1fr) de cac phan tu khong nho qua. Su dung media queries de thay doi so cot tai cac diem nut. xem xet container queries cho responsive cap thanh phan.