正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

Learn CSS GRID 🔥 ➼ Animated tutorial makes learning easier.

Alamin

100,458 subscribers

173,886 次观看 • 3 年前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

10 条评论

Kris Van Houten 的头像

Kris Van Houten3 年前

Your HTML uses <main> but your CSS references a <div>. Or did I miss something?

Alamin 的头像

Alamin3 年前

Thanks a lot, @krivaten for pointing out the error I made. Actually, I forgot to add the main tag instead I add div. I am glad you saw the error and commented. Let's connect.

Adetomiwa 的头像

Adetomiwa3 年前

Can you explain why you used main instead of div ?

Josh Ifeanyichukeu 的头像

Josh Ifeanyichukeu3 年前

I love this boss ❤️

katlego qra 的头像

katlego qra3 年前

We appreciate your effort man

Muhammad Bangash 🎯 的头像

Muhammad Bangash 🎯3 年前

Cool 😎

kaastos 的头像

kaastos3 年前

Is it a site? Or did you create this?

Alamin 的头像

Alamin3 年前

I created this using animation software. Did it help you?

Jeremy0𝕩 的头像

Jeremy0𝕩3 年前

A concept that was once hard to grasp for me. Thanks Alamin!

Alamin 的头像

Alamin3 年前

@jeremy0x_ I really appreciate your comments. Glad it helped, Let's connect.

相关视频

Learn CSS Grid Layout. Animated tutorial makes learning CSS easier.

Learn CSS Grid Layout. Animated tutorial makes learning CSS easier.

Alamin

136,213 次观看 • 3 年前

CSS Grid ( justify-content ) 🔥 ➼ The animated tutorial makes learning easier.

CSS Grid ( justify-content ) 🔥 ➼ The animated tutorial makes learning easier.

Alamin

46,145 次观看 • 3 年前

Learn CSS Display Property In 54 seconds 🔥 The animated tutorial makes learning easier.

Learn CSS Display Property In 54 seconds 🔥 The animated tutorial makes learning easier.

Alamin

75,236 次观看 • 3 年前

Learn CSS Flexbox in One minute ( Save It) Animated tutorial makes learning CSS easier.

Learn CSS Flexbox in One minute ( Save It) Animated tutorial makes learning CSS easier.

Alamin

65,653 次观看 • 3 年前

CSS Position It's easier to learn something when it is animated.

CSS Position It's easier to learn something when it is animated.

Ali Reza

139,872 次观看 • 3 年前

transform - CSS part || It's easier to learn something when it is animated.

transform - CSS part || It's easier to learn something when it is animated.

Ali Reza

167,684 次观看 • 3 年前

Grid-Box It's easier to learn something when it is animated.

Grid-Box It's easier to learn something when it is animated.

Ali Reza

156,146 次观看 • 3 年前

4 ways of centering a div - CSS It's easier to learn something when it is animated. 🚀

4 ways of centering a div - CSS It's easier to learn something when it is animated. 🚀

Ali Reza

96,148 次观看 • 3 年前

Quick tutorial on how to stack elements using CSS grid instead of position absolute:

Quick tutorial on how to stack elements using CSS grid instead of position absolute:

Jess Chan | Coder Coder

11,606 次观看 • 1 个月前

Master CSS Grid in 2 CSS lines!

Master CSS Grid in 2 CSS lines!

Ania Kubów #JavaScriptGames

67,145 次观看 • 1 年前

Flex-Box It's easier to learn something when it is animated.

Flex-Box It's easier to learn something when it is animated.

Ali Reza

145,121 次观看 • 3 年前

Flex Order It's easier to learn something when it is animated.

Flex Order It's easier to learn something when it is animated.

Ali Reza

261,477 次观看 • 3 年前

The CSS Grid Builder that now ships with Gutenberg is 🔥👇

The CSS Grid Builder that now ships with Gutenberg is 🔥👇

Jamie Marsland - Head of WordPress YouTube ❤️

17,045 次观看 • 2 年前

a smoother radius transform version using css. no framer motion used here. for auto height transition using css `grid` inspired by jhey ʕ•ᴥ•ʔ. when collapsed `grid-rows-[0fr]` and expanded `grid-rows-[1fr]`. and that with `ease-out-cubic` with `300ms` makes it feel just perfect ~

a smoother radius transform version using css. no framer motion used here. for auto height transition using css `grid` inspired by jhey ʕ•ᴥ•ʔ. when collapsed `grid-rows-[0fr]` and expanded `grid-rows-[1fr]`. and that with `ease-out-cubic` with `300ms` makes it feel just perfect ~

Soren

104,532 次观看 • 7 个月前

justify-content & align-items It's easier to learn something when it is animated.

justify-content & align-items It's easier to learn something when it is animated.

Ali Reza

54,180 次观看 • 3 年前

"Always great grid - CSS grid + :has() + view transitions" by Adam Argyle

"Always great grid - CSS grid + :has() + view transitions" by Adam Argyle

CodePen.IO

79,784 次观看 • 1 年前

Flex-basis / Flex-grow + Flex-wrap It's easier to learn something when it is animated.

Flex-basis / Flex-grow + Flex-wrap It's easier to learn something when it is animated.

Ali Reza

56,812 次观看 • 3 年前

you can stack elements with css grid/subgrid by giving them the same grid position 🧑‍🍳 this scroll track window is a great use case for css grid + position: sticky catch the 3D breakdown 👇

you can stack elements with css grid/subgrid by giving them the same grid position 🧑‍🍳 this scroll track window is a great use case for css grid + position: sticky catch the 3D breakdown 👇

jhey ʕ•ᴥ•ʔ

127,638 次观看 • 5 个月前

Grid design tutorial By: mroffbeat_

Grid design tutorial By: mroffbeat_

ATMO

73,835 次观看 • 4 个月前

Here is a patch to test CSS grid in React native.

Here is a patch to test CSS grid in React native.

nishan (o^▽^o)

68,059 次观看 • 5 个月前