CSS Grid cơ bản cho người mới toàn tập phần 1
HTML-код
- Опубликовано: 5 окт 2024
- 👉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
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
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 đó
cám ơn em nhiều nhé
Cảm ơn anh rất nhiều, video tuyệt vời.
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.
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 ạ
Video hay toá, giúp mình hiểu thêm về grid.
hi vọng có ích cho bro nà
Em đã học theo và hiểu ạ, cảm ơn Anh rất nhiều , so great
Hữu ích quá anh ơi, em cảm ơn anh rất nhiều ạ❤
chia sẻ rất hay và hữu ích
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.
âu cơ em nhá
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 ạ
oke thanks em nè
từ đầu đến đoạn 3p30s, bạn nào bị ảnh chồng nhau thì thêm .layout-image{
width: 100%;
}
Videos rất dễ theo dõi và dễ hiểu, Thx a rất nhiều!
cám ơn em nhé
cảm ơn anh ạ video rất dễ hiểu
Cảm ơn ad vì bài học bổ ích nhé
Ok nè
Hay quá a ơi, mong a ra thêm nhiều clip như kiểu này nữa ạ
rất rễ hiểu ạ
Nice video man, clear and concise explanation! Thanks a lot!
cảm ơn bạn nhiều ạ
a hướng dẫn dễ hiểu! tks a
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è ^^
cám ơn em
@@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
cảm ơn anh rất nhiều ạ
Hay qua anh a! Cam on anh rat nhieu.
Cảm ơn anh ạ
đúng cái e đang cần....thanks a !!!
rất dễ hiểu ạ, cảm ơn anh rất nhiều hihi!
ngon lành luôn em
*{
margin: 0;
padding: 0;
}
.layout-image{
display: block;
max-width: 100%;
}
quá hay luôn anh. fan cứng luôn rồi hehe
Hay quá anh ơi !
Video hay quá anh ơi
Quá hay bro ơi!
@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
Ảo diệu thiệt
hay quá bác
xem lần đầu thấy hơi ảo :D ! cảm ơn admin !
Hay thật sự a ui
Video rất bổ ích và dễ hiểu. Cho em góp ý chút: fr là viết tắt của fractional ạ.
@@evondevfrontend dạ không có gì ạ
Hay qua anh
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
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.
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ó :))
Hay nè :)))
sao khi sử dụng display: grid thì các hình của em nó bị đè lên nhau vậy ạ?
Nên dùng boostrap hay grid v a
ra phần 2 đi a.
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?
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
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 ạ
nào rãnh a code sau nà
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.
@@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
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 ạ
code sml đó em
Đ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 ạ
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
em phải css cho ảnh, và phải có css reset
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 ?
@@evondevfrontend à dạ oke anh
@@vietkhongmom9802 cần không thế ạ. cmt của ad bị xóa
@@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 ơi anh đang dùng theme gì đấy ạ
Anh ơi cho em hỏi, sao ảnh cứ tràn ra khỏi div layout-item v ạ
Bạn phải up đoạn code lên chứ hỏi ko thế hơi khó bắt lỗi
Nếu muốn ko tràn thì div chứa img , bạn cho overflow : hidden nha
ảnh behavior của nó là thế, em phải css cho nó display block và max-width: 100% trước
@@evondevfrontend css cho cái nào v anh
@@huynguyenquang8387 cho cái img
mình thấy sài grid dễ hơn flex và tiện nhanh hơn.
đù idol siêng quá
tùy trường hợp ko phải cứ grid là tiện và flex là ko tiện
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:)
@@evondevfrontend em cảm ơn
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 ạ
e đổi firefox chắc được á
Hi anh
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
mik cũng bị v
@@QuocHao-j1d 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
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.
extension mỗi khi đánh có hiệu ứng là gì vậy ạ
extension powermode đó, mà đừng nên cài làm gì, mình gỡ rồi, lag lắm
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 ạ
Kk css cơ bản reset đồ ấy mà
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
@@evondevfrontend có phải dùng flex decoration ko a
@@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 ý
ả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
chắc em thiếu display block và max-width 100% cho hình rồi
dạ em cảm ơn nha
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 ạ
@@evondevfrontend dạ
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 ạ
chắc bạn thiếu css này
layout-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
@@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
a cài thêm gì để gõ img-cover nó hiện sẵn luôn v
extension Evondev Snippets nhé
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.
@@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 :((
@@evondevfrontend ok cảm ơn anh nha😁
bạn set img width height = 100%
@@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
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 😬
@@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 í
@@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à?
@@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ẽ
Anh bị nhầm r, Fr là fraction ấy
Cám ơn em góp ý nha
Thấy code cứng sao sao á anh, không linh hoạt lắm.
@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 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
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
@@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
@@yalitan96 oke em nhé
anh ơi cho em tải code được không ạ ? em gặp lỗi mày không biết tại sao
e đăng lên nhóm fb hỏi đi nè
anh cho em xin công thưc margin-left trong flex-bõ với
em tìm video flexbox coi a có chỉ rồi á
@@evondevfrontend ok a
@@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
@@angVanHuy-tf2rv tìm hiểu overflow và grid auto flow đi em
sao anh trả lời cmt mọi người xong anh lại xóa đi vậy ạ,
nó bị mất đó em, ai rãnh đi xóa hàng ngàn comment vậy em
flex vẫn có gap nha bạn ơi
@@evondevfrontend hihi ok bạn
:V cái extention mà a bấm nó nổ pháo hoa là gì thế ạ
@@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
@@evondevfrontend e cảm ơn ạ
@@evondevfrontend cái extention evondev của a có hỗ trợ gợi ý trong react ko ạ
Anh dùng font j vậy
@@evondevfrontend cảm ơn anh nhìu
@@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
@@evondevfrontend chỗ font-family anh để như thế nào ạ
@@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
cảm ơn anh vì video rất hữu ích ạ
cảm ơn anh rất nhiều
hơm có gì nà hi vọng có ích cho em
Cảm ơn anh