Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

denicmarko's profile picture

Marko Denic

269,004 subscribers

211,198 görüntüleme • 1 yıl önce •via X (Twitter)

Bilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

9 Yorum

Marko Denic profil fotoğrafı
Marko Denic1 yıl önce

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

SoftPlan profil fotoğrafı
SoftPlan1 yıl önce

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 profil fotoğrafı
Csaba Kissi1 yıl önce

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

Marko Denic profil fotoğrafı
Marko Denic1 yıl önce

For Tailwind you have this:

Shefali profil fotoğrafı
Shefali1 yıl önce

This is really amazing!

Prasenjit profil fotoğrafı
Prasenjit1 yıl önce

That's really cool actually.

Neo Kim profil fotoğrafı
Neo Kim1 yıl önce

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

Ritika Agrawal profil fotoğrafı
Ritika Agrawal1 yıl önce

This is very cool!

Mohamad Bo Hamad profil fotoğrafı
Mohamad Bo Hamad1 yıl önce

Doesn't DevTools do something similar?

Benzer Videolar

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 görüntüleme • 3 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

#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 görüntüleme • 2 yıl önce

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 görüntüleme • 10 ay önce

📣 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 görüntüleme • 1 yıl önce

🏆 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 görüntüleme • 2 yıl önce

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 görüntüleme • 2 yıl önce

Master CSS Grid in 2 CSS lines!
0:59

Master CSS Grid in 2 CSS lines!

Ania Kubów #JavaScriptGames

67,145 görüntüleme • 1 yıl önce

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 görüntüleme • 6 ay önce

Repair your drain quickly and easily🛠️
0:50

Repair your drain quickly and easily🛠️

Taichi for Health

92,040 görüntüleme • 8 ay önce

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 görüntüleme • 7 ay önce

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 görüntüleme • 4 ay önce

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

soft-launching a new grid layout like…

Instagram

2,835,982 görüntüleme • 3 ay önce

random layout experiment for my website
0:42

random layout experiment for my website

Kitasenju Design

20,500 görüntüleme • 1 yıl önce

"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 görüntüleme • 1 yıl önce

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 görüntüleme • 3 yıl önce

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 görüntüleme • 2 yıl önce