Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

denicmarko's profile picture

Marko Denic

269,004 subscribers

211,198 Aufrufe • vor 1 Jahr •via X (Twitter)

Wissenschaft & Technologie
LIVE

Anya Rossi• Live Now

Private livecam show

9 Kommentare

Profilbild von Marko Denic
Marko Denicvor 1 Jahr

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

Profilbild von SoftPlan
SoftPlanvor 1 Jahr

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

Profilbild von Csaba Kissi
Csaba Kissivor 1 Jahr

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

Profilbild von Marko Denic
Marko Denicvor 1 Jahr

For Tailwind you have this:

Profilbild von Shefali
Shefalivor 1 Jahr

This is really amazing!

Profilbild von Prasenjit
Prasenjitvor 1 Jahr

That's really cool actually.

Profilbild von Neo Kim
Neo Kimvor 1 Jahr

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

Profilbild von Ritika Agrawal
Ritika Agrawalvor 1 Jahr

This is very cool!

Profilbild von Mohamad Bo Hamad
Mohamad Bo Hamadvor 1 Jahr

Doesn't DevTools do something similar?

Ähnliche Videos

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 Aufrufe • vor 3 Jahren

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Jahr

#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 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 10 Monaten

📣 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 Aufrufe • vor 1 Jahr

🏆 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 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 2 Jahren

Master CSS Grid in 2 CSS lines!
0:59

Master CSS Grid in 2 CSS lines!

Ania Kubów #JavaScriptGames

67,145 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 6 Monaten

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 Aufrufe • vor 4 Monaten

Repair your drain quickly and easily🛠️
0:50

Repair your drain quickly and easily🛠️

Taichi for Health

92,040 Aufrufe • vor 8 Monaten

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 Aufrufe • vor 7 Monaten

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

soft-launching a new grid layout like…

Instagram

2,835,982 Aufrufe • vor 3 Monaten

random layout experiment for my website
0:42

random layout experiment for my website

Kitasenju Design

20,500 Aufrufe • vor 1 Jahr

"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 Aufrufe • vor 1 Jahr

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,322 Aufrufe • vor 3 Jahren

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 Aufrufe • vor 2 Jahren