正在加载视频...

视频加载失败

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

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

Alamin

100,451 subscribers

46,145 次观看 • 3 年前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

11 条评论

Ejaj Ahmed 的头像

Ejaj Ahmed3 年前

I love your edits man it's so satisfying, Amazing

Alamin 的头像

Alamin3 年前

Thanks, brother,, putting real effort here.

Harsh Deep 的头像

Harsh Deep3 年前

This is Amazing I'm not good at CSS grid.

Alamin 的头像

Alamin3 年前

learn it, it's best for three dimensional layouts.

Stephane P 的头像

Stephane P3 年前

Very nice ! Less animations between pages would be better

Alamin 的头像

Alamin3 年前

Thanks for your feedback, I will keep that in mind and fix it in my next video.

Ikram Hanif👨‍💻 的头像

Ikram Hanif👨‍💻3 年前

Superb👍

Pritesh Kiri 的头像

Pritesh Kiri3 年前

Great explanation

Alamin 的头像

Alamin3 年前

Thanks Pritesh.

Ibrahim Zahir 的头像

Ibrahim Zahir3 年前

What about tailwind

Alamin 的头像

Alamin3 年前

I will start making video about tailwind in future.

相关视频

Learn CSS GRID (align-content) 🔥 ➼ Animated tutorial makes learning easier.

Learn CSS GRID (align-content) 🔥 ➼ Animated tutorial makes learning easier.

Alamin

85,495 次观看 • 3 年前

Learn CSS GRID 🔥 ➼ Animated tutorial makes learning easier.

Learn CSS GRID 🔥 ➼ Animated tutorial makes learning easier.

Alamin

173,886 次观看 • 3 年前

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

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

Alamin

136,213 次观看 • 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 年前

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 年前

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 年前

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 个月前

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 年前

Future CSS Tip! 🔮 (This one's close 🤏) You can use "subgrid" to give child elements access to a parent's grid tracks 👀 This is great when you want to make sure content lines up 🙌 Check those cards 👇 article { grid-row: span 4; display: grid; grid-template-rows: subgrid; 👈 } In this example, article uses grid but makes use of the tracks defined by the parent layout container. That makes it easier to line up content within the cards 🙏 Cool thing is, we don't even need to define the rows in the parent. We use the implicit ones from the parent. main { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) } This might be easier to understand with the video below that shows the grid tracks using DevTools and toggles subgrid on and off 🤙 CodePen.IO link below! 👇

Future CSS Tip! 🔮 (This one's close 🤏) You can use "subgrid" to give child elements access to a parent's grid tracks 👀 This is great when you want to make sure content lines up 🙌 Check those cards 👇 article { grid-row: span 4; display: grid; grid-template-rows: subgrid; 👈 } In this example, article uses grid but makes use of the tracks defined by the parent layout container. That makes it easier to line up content within the cards 🙏 Cool thing is, we don't even need to define the rows in the parent. We use the implicit ones from the parent. main { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) } This might be easier to understand with the video below that shows the grid tracks using DevTools and toggles subgrid on and off 🤙 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

507,529 次观看 • 2 年前

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 年前

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 年前

Master CSS Grid in 2 CSS lines!

Master CSS Grid in 2 CSS lines!

Ania Kubów #JavaScriptGames

67,145 次观看 • 1 年前

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 个月前

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 个月前

"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 年前

Animated exclusive accordions with CSS 😎 ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: calc-size(auto); } Exclusive On the way! 🫶

Animated exclusive accordions with CSS 😎 ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: calc-size(auto); } Exclusive On the way! 🫶

jhey ʕ•ᴥ•ʔ

216,281 次观看 • 1 年前

CSS only animated exclusive accordion update 🚀 details { interpolate-size: allow-keywords; } ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: auto; }

CSS only animated exclusive accordion update 🚀 details { interpolate-size: allow-keywords; } ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: auto; }

jhey ʕ•ᴥ•ʔ

51,127 次观看 • 1 年前

Grid design tutorial By: mroffbeat_

Grid design tutorial By: mroffbeat_

ATMO

73,835 次观看 • 4 个月前