正在加载视频...

视频加载失败

返回首页

Quickly and easily create a CSS Grid layout for your website!

denicmarko's profile picture

Marko Denic

269,004 subscribers

211,198 次观看 • 1 年前 •via X (Twitter)

科学技术
LIVE

Anya Rossi• Live Now

Private livecam show

9 条评论

Marko Denic 的头像
Marko Denic1 年前

If you like CSS generators, you'll love this one as well:

SoftPlan 的头像
SoftPlan1 年前

Discover the software trusted by home building professionals: architects, builders, designers, and lumberyards all agree that SoftPlan is the top choice for drawing houses.

Csaba Kissi 的头像
Csaba Kissi1 年前

This is amazing. It would be great if it generates it for tailwind css also

Marko Denic 的头像
Marko Denic1 年前

For Tailwind you have this:

Shefali 的头像
Shefali1 年前

This is really amazing!

Prasenjit 的头像
Prasenjit1 年前

That's really cool actually.

Neo Kim 的头像
Neo Kim1 年前

I'd have saved hours as a student if I had it back then. looks wild!

Ritika Agrawal 的头像
Ritika Agrawal1 年前

This is very cool!

Mohamad Bo Hamad 的头像
Mohamad Bo Hamad1 年前

Doesn't DevTools do something similar?

相关视频

Learn CSS Grid Layout. Animated tutorial makes learning CSS easier.
0:39

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

Alamin

136,213 次观看 • 3 年前

Here's React Aria's upcoming Virtualizer component with a waterfall layout. Virtualizer comes with list, grid, waterfall, and table layouts, and you can also create your own completely custom layout.
0:26

Here's React Aria's upcoming Virtualizer component with a waterfall layout. Virtualizer comes with list, grid, waterfall, and table layouts, and you can also create your own completely custom layout.

Devon Govett

18,237 次观看 • 1 年前

This week, Gabriel Perales 🤓 and I worked together on a tool for Tailwind CSS users. The tool lets you easily create grids for your Tailwind CSS projects, perfect for generating bento-style grids! It supports Tailwind CSS v3/v4 —
1:08

This week, Gabriel Perales 🤓 and I worked together on a tool for Tailwind CSS users. The tool lets you easily create grids for your Tailwind CSS projects, perfect for generating bento-style grids! It supports Tailwind CSS v3/v4 —

Michael Andreuzza

69,293 次观看 • 1 年前

Easily customize your website, dig into specific elements, and get AI generative fixes for CSS bugs with AI Assistance in #ChromeDevTools:
0:38

Easily customize your website, dig into specific elements, and get AI generative fixes for CSS bugs with AI Assistance in #ChromeDevTools:

Chrome for Developers

25,960 次观看 • 1 年前

1/ FLEX YOUR VIBIES 📸✨ New site update: You can now create a custom grid of all your vibies instantly! No more screenshotting, downloading, and manually designing your own grids. We got you 🫶 1. Head to the official GVC website (link in next post) 2. Click “My Collection” 3. Connect your wallet 4. Select “Create Grid Layout” 5. Customize your grid, export it, and share it on X! Choose how many vibies to display, adjust the layout order, and flex your perfect grid all in one spot 🎨🤙 Drop your grids below! 👀👇
0:20

1/ FLEX YOUR VIBIES 📸✨ New site update: You can now create a custom grid of all your vibies instantly! No more screenshotting, downloading, and manually designing your own grids. We got you 🫶 1. Head to the official GVC website (link in next post) 2. Click “My Collection” 3. Connect your wallet 4. Select “Create Grid Layout” 5. Customize your grid, export it, and share it on X! Choose how many vibies to display, adjust the layout order, and flex your perfect grid all in one spot 🎨🤙 Drop your grids below! 👀👇

Good Vibes Club 🤙

25,623 次观看 • 1 年前

#CSS Neue Bento ✅ grid layout ✅ :has() quantity queries ✅ aspect-ratio container queries ✅ view transitions for flare
0:48

#CSS Neue Bento ✅ grid layout ✅ :has() quantity queries ✅ aspect-ratio container queries ✅ view transitions for flare

Adam Argyle

128,343 次观看 • 2 年前

Create a game show for your livestream. - Easily integrate via browser source. - Customize colors and layout. - Add your own questions. - Easy integration of facecams. - Selection of different game shows.
0:39

Create a game show for your livestream. - Easily integrate via browser source. - Customize colors and layout. - Add your own questions. - Easy integration of facecams. - Selection of different game shows.

StreamGamesTV

315,569 次观看 • 10 个月前

📣 When you create a clip, we will auto-generate a portrait version that can easily be shared to social for discovery. 🎬 For streamers, just edit the portrait layout of any Clip once and we will save your layout preference for future clips.
0:43

📣 When you create a clip, we will auto-generate a portrait version that can easily be shared to social for discovery. 🎬 For streamers, just edit the portrait layout of any Clip once and we will save your layout preference for future clips.

Twitch

99,284 次观看 • 1 年前

🏆 The Holy Grail Layout 🏆 Using grid-template you can write rows and columns all at the same time all with one line of code (kinda). More modern CSS layout tips →
0:56

🏆 The Holy Grail Layout 🏆 Using grid-template you can write rows and columns all at the same time all with one line of code (kinda). More modern CSS layout tips →

Chrome for Developers

21,300 次观看 • 2 年前

Future UI && CSS Tip! 🔮 You could use View Transitions to animate CSS grid position and create an OSX-style exposé for a portfolio 🔥 It's a grid where things move based on state. Wrapped in a VT 🤙 [data-expose] section{ grid-area:var(--x)/var(--y); } CodePen.IO link below 👇
0:36

Future UI && CSS Tip! 🔮 You could use View Transitions to animate CSS grid position and create an OSX-style exposé for a portfolio 🔥 It's a grid where things move based on state. Wrapped in a VT 🤙 [data-expose] section{ grid-area:var(--x)/var(--y); } CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

171,324 次观看 • 2 年前

Master CSS Grid in 2 CSS lines!
0:59

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 👇
0:27

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 ʕ•ᴥ•ʔ

128,494 次观看 • 6 个月前

Looking how to participate in the Solana hackathon? Here's an example of how to create a trading bot on solana very easily and quickly just by messaging your agent through telegram! Get your agent set up and create something for the hackathon 👩‍💻
0:33

Looking how to participate in the Solana hackathon? Here's an example of how to create a trading bot on solana very easily and quickly just by messaging your agent through telegram! Get your agent set up and create something for the hackathon 👩‍💻

brimigs

30,311 次观看 • 4 个月前

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 ~
0:26

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

Repair your drain quickly and easily🛠️
0:50

Repair your drain quickly and easily🛠️

Taichi for Health

92,040 次观看 • 8 个月前

soft-launching a new grid layout like…
0:26

soft-launching a new grid layout like…

Instagram

2,835,982 次观看 • 3 个月前

random layout experiment for my website
0:42

random layout experiment for my website

Kitasenju Design

20,500 次观看 • 1 年前

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

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

CodePen.IO

80,298 次观看 • 1 年前

here’s CSS GUI ( by Components AI) using GPT-4 to create website markup from a prompt and then expose the styles to be edited generatively
1:17

here’s CSS GUI ( by Components AI) using GPT-4 to create website markup from a prompt and then expose the styles to be edited generatively

harley turan

17,328 次观看 • 3 年前

3. Create Website: Experts recommend supplementing your resume and job application with a personal website to boost your AI job search success. Use a tool like Durable to create your website in 30 seconds.
0:56

3. Create Website: Experts recommend supplementing your resume and job application with a personal website to boost your AI job search success. Use a tool like Durable to create your website in 30 seconds.

Farhan

32,409 次观看 • 2 年前