CSS Grid cơ bản cho người mới toàn tập phần 1
👉CSS Grid cơ bản cho người mới toàn tập phần 1
👉 Tham khảo khoá học cơ bản của mình: evondev.com/khoa-hoc-html-css
👉 Tham khảo khoá học nâng cao của mình: evondev.com/khoa-hoc-huong-da...
👉 Kết nối với mình
Fanpage: / evondevblog
Facebook: / tuan.trananh.0509
Blog: evondev.com
Nhóm của mình: / 2565163230401512
Học online với mình: / tuan.trananh.0509
👉 Công cụ, tài nguyên
- Theme: Dracula Official
- Font chữ: SF Mono, 14px
- Packages: Prettier, Material Icon, Highlight Matching Tag, Bracket Pair Colorizer, HTML Snippets, Live Server.
- Extension: Eye Dropper color picker Chrome Extension, color slurp MacOS, visBug Chrome Extension
- Tải Telegram cho máy tính tại đây: desktop.telegram.org/
- Source code tại đây: t.me/evontube
Пікірлер: 155
Em đọc cái bài về sự nghiệp của a trên evondev em thấy có nhiều động lực theo tiếp ngành quá idol. Công nhận mấy cái thumbnail a làm ấn tượng thật, lúc nào có clip là em bay vào ủn hộ ngay
video quá tuyệt vời và hiệu quả Anh ơi, chúc anh nhiều sức khỏe và hoàn thành nhiều í tưởng hay hơn nữa ạ
Cảm ơn anh rất nhiều, video tuyệt vời.
Em đã học theo và hiểu ạ, cảm ơn Anh rất nhiều , so great
Hay quá a ơi, mong a ra thêm nhiều clip như kiểu này nữa ạ
Anh đầu tư bài rất tốt , chỉ bài dễ hiểu .
Cảm ơn. Bài giảng rất hay.
Nice video man, clear and concise explanation! Thanks a lot!
cảm ơn anh ạ video rất dễ hiểu
cảm ơn anh vì video rất hữu ích ạ
chia sẻ rất hay và hữu ích
quá hay luôn anh. fan cứng luôn rồi hehe
a hướng dẫn dễ hiểu! tks a
Hay qua anh a! Cam on anh rat nhieu.
đúng cái e đang cần....thanks a !!!
Videos rất dễ theo dõi và dễ hiểu, Thx a rất nhiều!
@evondevfrontend
2 жыл бұрын
cám ơn em nhé
Hữu ích quá anh ơi, em cảm ơn anh rất nhiều ạ❤
cảm ơn anh rất nhiều ạ
Cảm ơn anh ạ
Cảm ơn anh
Hay quá anh ơi !
Quá hay bro ơi!
Video hay quá anh ơi
cảm ơn bạn nhiều ạ
rất rễ hiểu ạ
@evondev hướng dẫn dễ hiểu. Nhưng bạn thêm code github vào detail video thì tuyệt hơn
Cảm ơn ad vì bài học bổ ích nhé
@evondevfrontend
2 жыл бұрын
Ok nè
Video hay toá, giúp mình hiểu thêm về grid.
@evondevfrontend
2 жыл бұрын
hi vọng có ích cho bro nà
rất cảm ơn vì sự nhiệt tình của anh, nhất là việc anh đã chuẩn bị rất tốt từ silide bài giản bài thực hành, bài mẫu cho người xem, em thật sự đánh giá cao điều đó
@evondevfrontend
2 жыл бұрын
cám ơn em nhiều nhé
xem lần đầu thấy hơi ảo :D ! cảm ơn admin !
Hay thật sự a ui
Video a rất hữu ích và cho em hỏi trong video a dùng Extension gì để hiện Track-line vậy anh?
Hay qua anh
hay quá bác
cảm ơn anh rất nhiều
@evondevfrontend
2 жыл бұрын
hơm có gì nà hi vọng có ích cho em
rất dễ hiểu ạ, cảm ơn anh rất nhiều hihi!
@evondevfrontend
2 жыл бұрын
ngon lành luôn em
từ đầu đến đoạn 3p30s, bạn nào bị ảnh chồng nhau thì thêm .layout-image{ width: 100%; }
Ảo diệu thiệt
quá hay luôn ạ, chưa thấy ai giảng nhiệt tình mà dễ hiểu như anh ạ. Chúc anh năm mới đại thành công nè ^^
@evondevfrontend
2 жыл бұрын
cám ơn em
@vohoanghaduong6639
2 жыл бұрын
@@evondevfrontend e thích kênh của anh chỉ sau mỗi kênh toidicode dạo thôi ^^ . Chúc anh sức khỏe
em kết nhất cái câu của anh: RỒI !!!!! CHƯA XONG ĐÂU, CÒN NỮA,... tự động được truyền thêm cảm hứng học tiếp )) cảm ơn anh đã làm clip ạ
@evondevfrontend
2 жыл бұрын
oke thanks em nè
Hay nè :)))
Em thấy anh giảng rất dễ hiểu. Mong anh ra nhiều video tiếp thêm động lực học đến cho mọi người nha anh.
@evondevfrontend
2 жыл бұрын
âu cơ em nhá
Sau a code từ đầu phần css đi ạ tại bên trên a code nhiều ng kb sẽ có gì và lúc chạy n khác ấy a
ra phần 2 đi a.
Video rất bổ ích và dễ hiểu. Cho em góp ý chút: fr là viết tắt của fractional ạ.
@nguyenngocphi5429
2 жыл бұрын
@@evondevfrontend dạ không có gì ạ
Vậy cái này mình áp dụng vào việc đổ dữ liệu từ database lên được k a, vì đổ lên mình không biết được số hàng phải k a
Hi anh
Nên dùng boostrap hay grid v a
Cảm ơn anh nhiều. Tuy nhiên ảnh nó bị zoom không giống ảnh gốc. Hi vọng phần 2 anh hướng dẫn khắc phục.
@sportminh623
2 жыл бұрын
Muốn giữ dc kích thước ảnh gốc, mà yêu cầu phải phủ đều div thì hơi khó :))
Anh ơi anh đang dùng theme gì đấy ạ
em xin trang web để lấy mấy file ảnh kia
video hay , anh ơi anh có thể nào ra một video hướng dẫn tạo một trang web tin tức mặt đầu thoi được không ạ
@evondevfrontend
2 жыл бұрын
nào rãnh a code sau nà
sao khi sử dụng display: grid thì các hình của em nó bị đè lên nhau vậy ạ?
Anh ơi, khi mình setup trong css grid-column vs grid-row là 1/3 nhưng bên chrome nó lại nhận là 0.3333 nên không được, có cách nào để fix ko anh. Em cám ơn.
@Khoa200191
2 жыл бұрын
@@evondevfrontend dạ để e xài css reset thử
anh ơi sao em làm grid-column: 1/3; grid-row: 1/2; nó không đc ạaaaa
anh cho em hỏi khi chia bố cục layout thì mình nên chọn tk flex hay grid vậy ạ, theo ý kiến em thì em thấy tk grid tiện hơn flex nhiều
@evondevfrontend
Жыл бұрын
Tùy vào cấu trúc nha em, a sẽ làm video về vấn đêf này
Anh ơi cho em hỏi với ạ, nêu ở giữa các cột em muốn có đường line để ngăn thì có được không ạ
@evondevfrontend
Жыл бұрын
code sml đó em
Nếu dụng display : grid r , thì mình có cần áp dụng layout 12 cột cho trang wed k ạ để khi reponsive cho nó thuận tiện a ?
@vietkhongmom9802
2 жыл бұрын
@@evondevfrontend à dạ oke anh
@nhat6mui161
11 ай бұрын
@@vietkhongmom9802 cần không thế ạ. cmt của ad bị xóa
@vietkhongmom9802
11 ай бұрын
@@nhat6mui161 Bạn tham khảo grid system của bootstrap nhé , đa số layout của web đều sử dụng để dễ dàng responsive và chia layout
anh có thể cho e hỏi nếu như cái ví dụ thứ 2 theo bản design như đó ko dùng css grid mà dùng display flex thì làm ntn để giống bản design mong anh tl giúp
@PhongLe-zd9iw
2 жыл бұрын
@@evondevfrontend có phải dùng flex decoration ko a
@PhongLe-zd9iw
2 жыл бұрын
@@evondevfrontend flexbox e học rồi a nhưng cái ví dụ thứ 2 của anh e hình dung ko ra ý
*{ margin: 0; padding: 0; } .layout-image{ display: block; max-width: 100%; }
cho em hỏi làm sao để tạo grid-gap cho từng cột từng hàng vậy anh, chứ cái grid-gap trên là cho tất cả các hàng với cột, không riêng lẻ từng cột từng hàng được hả anh? Em cảm ơn:)
@luathoang3885
2 жыл бұрын
@@evondevfrontend em cảm ơn
anh ơi cho em hỏi với. Tại sao khi em dùng height cho class layout_item như anh thì nó không xét luôn height cho thg img bên trong ạ
@ngocgiapkt
2 жыл бұрын
chắc bạn thiếu css này layout-item img { width: 100%; height: 100%; object-fit: cover; }
@MinhTuan-fg3wq
2 жыл бұрын
@@ngocgiapkt chính vì code như trong vid không được nên mình có dùng css như bạn nói rồi
anh ơi anh cài cái gì mà dòng code dài n tự xuống dòng vừa với khung nhìn v ạ
@librashop24h
2 жыл бұрын
@@evondevfrontend dạ
Admin ơi không hiểu tại sao trên inspect chrome của em không hiên thị thông số track-line ạ
@evondevfrontend
Жыл бұрын
e đổi firefox chắc được á
Đoạn a set grid-template-columns: 200px 200px 100px; Em cũng set như a 2 hình đầu tiên đúng 200px nhưng hình cuối cùng của e nó không 100px mà nó to như kích thước ban đầu, e set overflow: hidden; nó vẫn k ẩn đi, a cho e hỏi vì sao dc k ạ
@evondevfrontend
2 жыл бұрын
do em chưa thiết lập css reset cho hình ảnh
Em code như anh nhưng sao cái gird-template-column nó không chỉnh width của ảnh mà nó vẫn giữ nguyên width .Xong ảnh này đè lên ảnh kia , lúc đo thì thấy nó vẫn cách nhau
@evondevfrontend
2 жыл бұрын
em phải css cho ảnh, và phải có css reset
extension mỗi khi đánh có hiệu ứng là gì vậy ạ
@evondevfrontend
2 жыл бұрын
extension powermode đó, mà đừng nên cài làm gì, mình gỡ rồi, lag lắm
Thanks bác nhiều, bài nay... nhưng nó ko thực tế, vì có phải khi nào cũng có 1 layout kiểu vậy đâu? Với nếu bác bonus thêm khoản Responsive nữa thì ngon 😬
@hungtranqt93
3 жыл бұрын
@@evondevfrontend ý bác cho dù hình ảnh như thế nào thì grid vẫn là layout đó hả bác? E tưởng có hình nó dài, ngắn, rộng khác nhau í
@hungtranqt93
3 жыл бұрын
@@evondevfrontend Vấn đề là khách hàng họ là ng up hình bác ạ. E ko nói hình nó mờ nhỏ mà kích thước ko khớp với design kiểu nó to hơn, rộng hơn, dài hơn. Nếu bác xài object fit cover thì sẽ có trường hình ảnh nó bị cắt ko đúng. Có đúng ko nà?
@hungtranqt93
3 жыл бұрын
@@evondevfrontend Mình thì đang muốn 1 thiết kế sử dụng đc tất cả mọi trường hợp kiểu masonry í ^^. Dù sao cũng thanks b vì chia sẽ
Khi em sử dụng grid-template-columns chia thành 3 cột f12 vẫn hiển thị ra 3 cột, nhưng mà kích cỡ ảnh vẫn giữ nguyên. Không biết là đang bị gì, mong anh giải đáp thắc mắc, em cảm ơn.
@hasang6388
2 жыл бұрын
@@evondevfrontend 3:32 anh chỉ css display:grid với grid-template-columns mà ảnh nó lại fit trong khung. Mà của em nó lại chèn lên nhau phân nữa, với kích cỡ giữ nguyên :((
@hasang6388
2 жыл бұрын
@@evondevfrontend ok cảm ơn anh nha😁
@hieupham0811
2 жыл бұрын
bạn set img width height = 100%
@vietnguyen-ld8nr
2 жыл бұрын
@@hieupham0811 May quá có cmt của bạn, mấy cmt trên a ấy ẩn r hay s ấy, mk cx bị mãi ko fix dc, tks bạn
a cài thêm gì để gõ img-cover nó hiện sẵn luôn v
@evondevfrontend
2 жыл бұрын
extension Evondev Snippets nhé
sao lúc em chèn ảnh và grid-template-column ảnh nó không thu nhỏ theo kích thước của column mà tự động bị cắt xén chiều ngang vậy anh
@_LuongQuocHao
2 жыл бұрын
mik cũng bị v
@duykhanhpham1392
2 жыл бұрын
@@_LuongQuocHao tui biết nguyên nhân ời. Có 1 thuộc tính thay đổi cái đó á : object-fit : [ fill, contain, cover ] bạn thêm thuộc tính này vào kèm giá trị contain là đc nhe. Mấy giá trị khác bạn tự tìm hiểu
mình thấy sài grid dễ hơn flex và tiện nhanh hơn.
@vuongqtvn
3 жыл бұрын
đù idol siêng quá
@duyopham520
3 жыл бұрын
tùy trường hợp ko phải cứ grid là tiện và flex là ko tiện
anh quên không quay đoạn css trên ạ làm em làm theo mà ko được hóa ra còn 1 đoạn trên bị thiếu:(( anh có thể cho em xin đoạn css đàu không ạ từ dòng 36 đổ lên ạ
@evondevfrontend
2 жыл бұрын
Kk css cơ bản reset đồ ấy mà
anh ơi, cho em hỏi, sao ảnh của anh nó tự động vừa với grid, còn ảnh em nó cứ bị dư ra một khoảng lớn á anh
@evondevfrontend
2 жыл бұрын
chắc em thiếu max-width: 100% display block không, hoặc em chưa set full không hoặc ảnh của em thiếu object-fit: cover các kiểu
@yalitan96
2 жыл бұрын
@@evondevfrontend em cũng vừa gặp trường hợp như bạn trên, may lội cmt mới biết mình thiếu max-width, cảm ơn anh nhiều
@evondevfrontend
2 жыл бұрын
@@yalitan96 oke em nhé
Thấy code cứng sao sao á anh, không linh hoạt lắm.
@nhatacoustic3633
3 жыл бұрын
@Lâm Nguyễn tôi không so sánh với flex box, do thấy đặt số cứng quá, ví dụ thêm 1 item vào giữa thì thành ra các item khác bị sai hết.
anh ơi cho em tải code được không ạ ? em gặp lỗi mày không biết tại sao
@evondevfrontend
2 жыл бұрын
e đăng lên nhóm fb hỏi đi nè
Video hay. PS: Video hướng dẫn mà có nền white noise, cực buồn ngủ. Bạn nên xử lý âm thanh tốt hơn.
:V cái extention mà a bấm nó nổ pháo hoa là gì thế ạ
@hieunguyenvan8477
3 жыл бұрын
@@evondevfrontend :V e gõ mà nó cứ giật giật mấy dong code kiểu gì ấy ạ , e xem của a thấy code nó k giật thì phải
@hieunguyenvan8477
3 жыл бұрын
@@evondevfrontend e cảm ơn ạ
@hieunguyenvan8477
3 жыл бұрын
@@evondevfrontend cái extention evondev của a có hỗ trợ gợi ý trong react ko ạ
flex vẫn có gap nha bạn ơi
@duongy96
3 жыл бұрын
@@evondevfrontend hihi ok bạn
anh cho em xin công thưc margin-left trong flex-bõ với
@evondevfrontend
2 жыл бұрын
em tìm video flexbox coi a có chỉ rồi á
@angVanHuy-tf2rv
2 жыл бұрын
@@evondevfrontend ok a
@angVanHuy-tf2rv
2 жыл бұрын
@@evondevfrontend display: grid thì làm như nào để layout có 1 hàng và khi quá thẻ cha thì nó có thanh srcoll ngang
@evondevfrontend
2 жыл бұрын
@@angVanHuy-tf2rv tìm hiểu overflow và grid auto flow đi em
Anh bị nhầm r, Fr là fraction ấy
@evondevfrontend
Жыл бұрын
Cám ơn em góp ý nha
ảnh của em bị tràn ra khỏi Track-line và làm giống video vẫn không được anh, anh giúp em với
@evondevfrontend
2 жыл бұрын
chắc em thiếu display block và max-width 100% cho hình rồi
@NhuQuynh-fm7nc
2 жыл бұрын
dạ em cảm ơn nha
Anh ơi cho em hỏi, sao ảnh cứ tràn ra khỏi div layout-item v ạ
@sportminh623
2 жыл бұрын
Bạn phải up đoạn code lên chứ hỏi ko thế hơi khó bắt lỗi
@sportminh623
2 жыл бұрын
Nếu muốn ko tràn thì div chứa img , bạn cho overflow : hidden nha
@evondevfrontend
2 жыл бұрын
ảnh behavior của nó là thế, em phải css cho nó display block và max-width: 100% trước
@huynguyenquang8387
2 жыл бұрын
@@evondevfrontend css cho cái nào v anh
@evondevfrontend
2 жыл бұрын
@@huynguyenquang8387 cho cái img
sao anh trả lời cmt mọi người xong anh lại xóa đi vậy ạ,
@evondevfrontend
2 жыл бұрын
nó bị mất đó em, ai rãnh đi xóa hàng ngàn comment vậy em
Anh dùng font j vậy
@manhtien1266
3 жыл бұрын
@@evondevfrontend cảm ơn anh nhìu
@manhtien1266
3 жыл бұрын
@@evondevfrontend anh chỉ em cách cài font ligature với font này với ạ .E cài mãi không được
@manhtien1266
3 жыл бұрын
@@evondevfrontend chỗ font-family anh để như thế nào ạ
@manhtien1266
3 жыл бұрын
@@evondevfrontend em làm được r cảm ơn anh rất nhiều chúc anh ngày càng nhiều sức khỏe để ra nhiều video chất lượng hơn cho bọn e xem