Загрузка видео...

Не удалось загрузить видео

На главную

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 месяцев назад

Repair your drain quickly and easily🛠️
0:50

Repair your drain quickly and easily🛠️

Taichi for Health

92,040 просмотров • 8 месяцев назад

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 месяцев назад

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 месяцев назад

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,322 просмотров • 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 лет назад