No video
CSS Grid cơ bản cho người mới toàn tập phần 1
Рет қаралды 66,927
Күн бұрын👉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/kh...
👉 Tham khảo khoá học nâng cao của mình: evondev.com/kh...
👉 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.telegr...
- Source code tại đây: t.me/evontube
@KhangNguyen-kq2iw 3 жыл бұрын
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
@haitranngoc4372 2 жыл бұрын
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é
@hahoang-uw5dt 3 жыл бұрын
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 ạ
@KhoaNguyen-pw9xb 2 жыл бұрын
Anh đầu tư bài rất tốt , chỉ bài dễ hiểu .
@minhtriettang5589 6 ай бұрын
Hữu ích quá anh ơi, em cảm ơn anh rất nhiều ạ❤
@thanhtrongtoeic3016 Жыл бұрын
Em đã học theo và hiểu ạ, cảm ơn Anh rất nhiều , so great
@bangdigi 2 жыл бұрын
Video hay toá, giúp mình hiểu thêm về grid.
@evondevfrontend 2 жыл бұрын
hi vọng có ích cho bro nà
@soulester001 3 жыл бұрын
Cảm ơn. Bài giảng rất hay.
@talhoan_5757 3 жыл бұрын
Cảm ơn anh rất nhiều, video tuyệt vời.
@quocphu142 2 жыл бұрын
Videos rất dễ theo dõi và dễ hiểu, Thx a rất nhiều!
@evondevfrontend 2 жыл бұрын
cám ơn em nhé
@trongkhanho7220 2 жыл бұрын
Cảm ơn ad vì bài học bổ ích nhé
@evondevfrontend 2 жыл бұрын
Ok nè
@TungNgoVan-on1mk 3 жыл бұрын
Hay quá a ơi, mong a ra thêm nhiều clip như kiểu này nữa ạ
@DatLT-2103 2 жыл бұрын
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á
@vohoanghaduong6639 2 жыл бұрын
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
@haphuongtrinh2153 3 жыл бұрын
cảm ơn anh vì video rất hữu ích ạ
@tims1179 2 жыл бұрын
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è
@huyvu2719 2 жыл бұрын
cảm ơn anh ạ video rất dễ hiểu
@nguyenthaihien1704 2 жыл бұрын
chia sẻ rất hay và hữu ích
@sonhoang2392 2 жыл бұрын
Nice video man, clear and concise explanation! Thanks a lot!
@gocnhof1283 3 жыл бұрын
từ đầu đến đoạn 3p30s, bạn nào bị ảnh chồng nhau thì thêm .layout-image{ width: 100%; }
@teenii9453 2 жыл бұрын
quá hay luôn anh. fan cứng luôn rồi hehe
@NguyenTran-kb1ns 3 жыл бұрын
a hướng dẫn dễ hiểu! tks a
@joeyle3783 2 жыл бұрын
Hay qua anh a! Cam on anh rat nhieu.
@hicee 3 жыл бұрын
@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
@tuanlinhhoang1894 2 жыл бұрын
rất rễ hiểu ạ
@zovito2440 2 жыл бұрын
rất dễ hiểu ạ, cảm ơn anh rất nhiều hihi!
@evondevfrontend 2 жыл бұрын
ngon lành luôn em
@DiepNguyen-bg9eo 2 жыл бұрын
cảm ơn anh rất nhiều ạ
@nhattannguyen2176 Жыл бұрын
cảm ơn bạn nhiều ạ
@nguyendinhbac7165 2 жыл бұрын
xem lần đầu thấy hơi ảo :D ! cảm ơn admin !
@Lee-lu8wz 3 жыл бұрын
đúng cái e đang cần....thanks a !!!
@nhanguyenthanh4319 2 жыл бұрын
cảm ơn anh rất nhiều
@evondevfrontend 2 жыл бұрын
hơm có gì nà hi vọng có ích cho em
@chamomile_. 3 жыл бұрын
Cảm ơn anh ạ
@PhanTanThangTH 3 жыл бұрын
Cảm ơn anh
@LHQQ888 3 жыл бұрын
Hay quá anh ơi !
@furyhawk9673 2 жыл бұрын
*{ margin: 0; padding: 0; } .layout-image{ display: block; max-width: 100%; }
@tuyentrancong3646 3 жыл бұрын
Video hay quá anh ơi
@j1s0o 3 жыл бұрын
Quá hay bro ơi!
@nguyenngocphi5429 3 жыл бұрын
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 3 жыл бұрын
@@evondevfrontend dạ không có gì ạ
@duyang969 3 жыл бұрын
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
@thanhtongle7646 3 жыл бұрын
Hay thật sự a ui
@canh4869 3 жыл бұрын
hay quá bác
@thile5012 3 жыл бұрын
Ảo diệu thiệt
@nguyenhopper8588 3 жыл бұрын
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ó :))
@quybuiquang1745 2 жыл бұрын
Hay qua anh
@hairdang1143 Жыл бұрын
sao khi sử dụng display: grid thì các hình của em nó bị đè lên nhau vậy ạ?
@HungSonNgo-no7xe Жыл бұрын
Nên dùng boostrap hay grid v a
@somebody-17546 3 жыл бұрын
ra phần 2 đi a.
@kebinh926 3 жыл бұрын
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?
@nguyenquochungfplhcm_k1733 2 жыл бұрын
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à
@quoctheinh3748 3 жыл бұрын
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
@huynguyenquang8387 2 жыл бұрын
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
@TamThanh-hv7ui 3 жыл бұрын
Hay nè :)))
@Congnguyen-jl2gg Жыл бұрын
em xin trang web để lấy mấy file ảnh kia
@Khoa200191 3 жыл бұрын
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 3 жыл бұрын
@@evondevfrontend dạ để e xài css reset thử
@huynhphat6115 Жыл бұрын
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
@hungle-pk8lx Жыл бұрын
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
@vanchuong9579 3 жыл бұрын
anh ơi sao em làm grid-column: 1/3; grid-row: 1/2; nó không đc ạaaaa
@vietkhongmom9802 2 жыл бұрын
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 Жыл бұрын
@@vietkhongmom9802 cần không thế ạ. cmt của ad bị xóa
@vietkhongmom9802 Жыл бұрын
@@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
@cbtool2535 2 жыл бұрын
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
@haumaithe9237 Жыл бұрын
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 á
@fuiyoh2811 3 жыл бұрын
Anh ơi anh đang dùng theme gì đấy ạ
@namkhang5093 2 жыл бұрын
Đ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
@vuduynhien38 3 жыл бұрын
Hi anh
@khangnguyen6547 3 жыл бұрын
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
@duykhanhpham1392 2 жыл бұрын
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
@luathoang3885 2 жыл бұрын
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
@PhongLe-zd9iw 2 жыл бұрын
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 ý
@MinhTuan-fg3wq 2 жыл бұрын
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
@datdang9416 2 жыл бұрын
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
@librashop24h 3 жыл бұрын
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 3 жыл бұрын
@@evondevfrontend dạ
@hasang6388 3 жыл бұрын
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 3 жыл бұрын
@@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 3 жыл бұрын
@@evondevfrontend ok cảm ơn anh nha😁
@hieupham0811 3 жыл бұрын
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
@huyentranuc8621 2 жыл бұрын
a cài thêm gì để gõ img-cover nó hiện sẵn luôn v
@evondevfrontend 2 жыл бұрын
extension Evondev Snippets nhé
@NhuQuynh-fm7nc 2 жыл бұрын
ả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
@dohoainamfgwhn4540 2 жыл бұрын
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à
@utruongmeo2085 2 жыл бұрын
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è
@vupham2099 2 жыл бұрын
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é
@nhatacoustic3633 3 жыл бұрын
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.
@tnln7893 2 жыл бұрын
Anh bị nhầm r, Fr là fraction ấy
@evondevfrontend 2 жыл бұрын
Cám ơn em góp ý nha
@angVanHuy-tf2rv 2 жыл бұрын
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
@dungjk 3 жыл бұрын
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.
@hungtranqt93 3 жыл бұрын
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ẽ
@hieunguyenvan8477 3 жыл бұрын
: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 ạ
@duongy96 3 жыл бұрын
flex vẫn có gap nha bạn ơi
@duongy96 3 жыл бұрын
@@evondevfrontend hihi ok bạn
@manhtien1266 3 жыл бұрын
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
@xuanchinh97 2 жыл бұрын
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
@congdatt 3 жыл бұрын
Unitop - Học web đi làm
Рет қаралды 32 М.