CSS Grid cơ bản cho người mới toàn tập phần 1

[@KhangNguyen-kq2iw]

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]

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]

cám ơn em nhiều nhé

[@KhoaNguyen-pw9xb]

Anh đầu tư bài rất tốt , chỉ bài dễ hiểu .

[@hahoang-uw5dt]

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 ạ

[@DatLT-2103]

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]

âu cơ em nhá

[@vothanhtrongmkt]

Em đã học theo và hiểu ạ, cảm ơn Anh rất nhiều , so great

[@tims1179]

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]

oke thanks em nè

[@bangdigi]

Video hay toá, giúp mình hiểu thêm về grid.

[@evondevfrontend]

hi vọng có ích cho bro nà

[@vohoanghaduong6639]

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]

cám ơn em

[@vohoanghaduong6639]

@@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

[@TungNgoVan-on1mk]

Hay quá a ơi, mong a ra thêm nhiều clip như kiểu này nữa ạ

[@minhtriettang5589]

Hữu ích quá anh ơi, em cảm ơn anh rất nhiều ạ❤

[@soulester001]

Cảm ơn. Bài giảng rất hay.

[@talhoan_5757]

Cảm ơn anh rất nhiều, video tuyệt vời.

[@trongkhanho7220]

Cảm ơn ad vì bài học bổ ích nhé

[@evondevfrontend]

Ok nè

[@nguyenthaihien1704]

chia sẻ rất hay và hữu ích

[@quocphu142]

Videos rất dễ theo dõi và dễ hiểu, Thx a rất nhiều!

[@evondevfrontend]

cám ơn em nhé

[@teenii9453]

quá hay luôn anh. fan cứng luôn rồi hehe

[@haphuongtrinh2153]

cảm ơn anh vì video rất hữu ích ạ

[@sonhoang2392]

Nice video man, clear and concise explanation! Thanks a lot!

[@hicee]

@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

[@joeyle3783]

Hay qua anh a! Cam on anh rat nhieu.

[@nguyendinhbac7165]

xem lần đầu thấy hơi ảo :D ! cảm ơn admin !

[@zovito2440]

rất dễ hiểu ạ, cảm ơn anh rất nhiều hihi!

[@evondevfrontend]

ngon lành luôn em

[@Lee-lu8wz]

đúng cái e đang cần....thanks a !!!

[@NguyenTran-kb1ns]

a hướng dẫn dễ hiểu! tks a

[@nguyenngocphi5429]

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]

@@evondevfrontend dạ không có gì ạ

[@tuyentrancong3646]

Video hay quá anh ơi

[@tuanlinhhoang1894]

rất rễ hiểu ạ

[@DiepNguyen-bg9eo]

cảm ơn anh rất nhiều ạ

[@gocnhof1283]

từ đầu đến đoạn 3p30s, bạn nào bị ảnh chồng nhau thì thêm .layout-image{ width: 100%; }

[@j1s0o]

Quá hay bro ơi!

[@LHQQ888]

Hay quá anh ơi !

[@HungSonNgo-no7xe]

Nên dùng boostrap hay grid v a

[@nguyenhopper8588]

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]

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ó :))

[@thanhtongle7646]

Hay thật sự a ui

[@duyang969]

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

[@kebinh926]

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]

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]

nào rãnh a code sau nà

[@PhanTanThangTH]

Cảm ơn anh

[@thile5012]

Ảo diệu thiệt

[@Congnguyen-jl2gg]

em xin trang web để lấy mấy file ảnh kia

[@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

[@canh4869]

hay quá bác

[@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

[@somebody-17546]

ra phần 2 đi a.

[@quoctheinh3748]

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

[@hairdang1143]

sao khi sử dụng display: grid thì các hình của em nó bị đè lên nhau vậy ạ?

[@quybuiquang1745]

Hay qua anh

[@fuiyoh2811]

Anh ơi anh đang dùng theme gì đấy ạ

[@huynguyenquang8387]

Anh ơi cho em hỏi, sao ảnh cứ tràn ra khỏi div layout-item v ạ

[@sportminh623]

Bạn phải up đoạn code lên chứ hỏi ko thế hơi khó bắt lỗi

[@sportminh623]

Nếu muốn ko tràn thì div chứa img , bạn cho overflow : hidden nha

[@evondevfrontend]

ảnh behavior của nó là thế, em phải css cho nó display block và max-width: 100% trước

[@huynguyenquang8387]

@@evondevfrontend css cho cái nào v anh

[@evondevfrontend]

@@huynguyenquang8387 cho cái img

[@furyhawk9673]

*{ margin: 0; padding: 0; } .layout-image{ display: block; max-width: 100%; }

[@vietkhongmom9802]

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]

@@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

[@vuduynhien38]

Hi anh

[@Khoa200191]

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]

@@evondevfrontend dạ để e xài css reset thử

[@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 á

[@PhongLe-zd9iw]

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]

@@evondevfrontend có phải dùng flex decoration ko a

[@PhongLe-zd9iw]

@@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]

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]

chắc bạn thiếu css này layout-item img { width: 100%; height: 100%; object-fit: cover; }

[@MinhTuan-fg3wq]

@@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

[@duykhanhpham1392]

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

[@SatLinh0901]

mik cũng bị v

[@duykhanhpham1392]

@@SatLinh0901 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

[@Baodt2911-g3p]

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]

em phải css cho ảnh, và phải có css reset

[@librashop24h]

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]

@@evondevfrontend dạ

[@luathoang3885]

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]

@@evondevfrontend em cảm ơn

[@namkhang5093]

Đ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]

do em chưa thiết lập css reset cho hình ảnh

[@datdang9416]

extension mỗi khi đánh có hiệu ứng là gì vậy ạ

[@evondevfrontend]

extension powermode đó, mà đừng nên cài làm gì, mình gỡ rồi, lag lắm

[@TamThanh-hv7ui]

Hay nè :)))

[@vanchuong9579]

anh ơi sao em làm grid-column: 1/3; grid-row: 1/2; nó không đc ạaaaa

[@huyentranuc8621]

a cài thêm gì để gõ img-cover nó hiện sẵn luôn v

[@evondevfrontend]

extension Evondev Snippets nhé

[@vupham2099]

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]

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]

@@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]

@@yalitan96 oke em nhé

[@angVanHuy-tf2rv]

anh cho em xin công thưc margin-left trong flex-bõ với

[@evondevfrontend]

em tìm video flexbox coi a có chỉ rồi á

[@angVanHuy-tf2rv]

@@evondevfrontend ok a

[@angVanHuy-tf2rv]

@@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]

@@angVanHuy-tf2rv tìm hiểu overflow và grid auto flow đi em

[@hungtranqt93]

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]

@@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]

@@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]

@@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ẽ

[@hasang6388]

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]

@@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]

@@evondevfrontend ok cảm ơn anh nha😁

[@hieupham0811]

bạn set img width height = 100%

[@vietnguyen-ld8nr]

@@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

[@dohoainamfgwhn4540]

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]

Kk css cơ bản reset đồ ấy mà

[@NhuQuynh-fm7nc]

ả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]

chắc em thiếu display block và max-width 100% cho hình rồi

[@NhuQuynh-fm7nc]

dạ em cảm ơn nha

[@dungjk]

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.

[@khangnguyen6547]

mình thấy sài grid dễ hơn flex và tiện nhanh hơn.

[@vuongqtvn]

đù idol siêng quá

[@duyopham520]

tùy trường hợp ko phải cứ grid là tiện và flex là ko tiện

[@hieunguyenvan8477]

:V cái extention mà a bấm nó nổ pháo hoa là gì thế ạ

[@hieunguyenvan8477]

@@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]

@@evondevfrontend e cảm ơn ạ

[@hieunguyenvan8477]

@@evondevfrontend cái extention evondev của a có hỗ trợ gợi ý trong react ko ạ

[@nhatacoustic3633]

Thấy code cứng sao sao á anh, không linh hoạt lắm.

[@nhatacoustic3633]

@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.

[@utruongmeo2085]

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]

e đăng lên nhóm fb hỏi đi nè

[@manhtien1266]

Anh dùng font j vậy

[@manhtien1266]

@@evondevfrontend cảm ơn anh nhìu

[@manhtien1266]

@@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]

@@evondevfrontend chỗ font-family anh để như thế nào ạ

[@manhtien1266]

@@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

[@duongy96]

flex vẫn có gap nha bạn ơi

[@duongy96]

@@evondevfrontend hihi ok bạn

[@tnln7893]

Anh bị nhầm r, Fr là fraction ấy

[@evondevfrontend]

Cám ơn em góp ý nha

[@xuanchinh97]

sao anh trả lời cmt mọi người xong anh lại xóa đi vậy ạ,

[@evondevfrontend]

nó bị mất đó em, ai rãnh đi xóa hàng ngàn comment vậy em

[@congdatt]

[@TGT094]

Hay điên

[@huyvu2719]

cảm ơn anh ạ video rất dễ hiểu

[@nhattannguyen2176]

cảm ơn bạn nhiều ạ

[@nhanguyenthanh4319]

cảm ơn anh rất nhiều

[@evondevfrontend]

hơm có gì nà hi vọng có ích cho em

[@chamomile_.]

Cảm ơn anh ạ