CSS Grid is SUCH a Timesaver

Подписаться 18 тыс.

Просмотров 2,4 тыс.

50% 1

You can make great layouts with both CSS Grid as well as Flexbox. However, when making article layouts with elements extending beyond the width of the main content, I've been using CSS Grid a lot lately.
In today's video I'll be showing you why this is my preferred approach. No more "left 50% and translateX(-50%)" to pull elements outside of the grid. Working with CSS Grid will make this so much easier.
✨ Become a PRO today via www.frontend.fyi/pro
🔗 Code, live playground and article here: www.frontend.fyi/v/using-css-...
Timestamps:
00:00 - Intro
00:20 - The article layout we'll be building
01:05 - How I used to build this before CSS grid
03:20 - Let's build this with CSS grid
08:26 - Making this responsive
12:48 - Outro
#frontend #css #html

Наука

Опубликовано:

7 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 28

@0xAndy 8 месяцев назад

This channel is such a gem.

@iAmTheWagon 8 месяцев назад

Incredible. I had no idea this was a thing.

@piotr406 8 месяцев назад

Reinventing in my head grid, 100% will use it more often

@roysaucedo 4 месяца назад

This is awesome!

@alexpanteli3651 8 месяцев назад

Small tip: You can omit the end and start when declaring the grid. Grid is smart enough to understand where the end and start is when positioning a grid item

@frontendfyi 8 месяцев назад

I learned something just now!! Thanks!

@kizigamer6895 8 месяцев назад

I dont understand what the tip means in practice can u elaborate more pls i also want to learn this me know the basics of grid and flex but get confused to use which one and this video help me understand grid more

@spectre_9 8 месяцев назад

@@kizigamer6895 I'm guessing he means instead of declaring full-start / full-end or content-start / content-end, you can simply declare, full and content without the start or end suffix. Correct me if I understood wrong :)

@frontendfyi 8 месяцев назад

@@spectre_9This is also what I understood! Didn't try it myself yet though.

@serveshchaturvedi2034 8 месяцев назад

This came as a mind grenade 🤯. I feel i have some kind of superpower now

@frontendfyi 8 месяцев назад

Right!!! This is so powerful!

@Lenglish-tp7ci 8 месяцев назад

awesome video!

@frontendfyi 8 месяцев назад

Thanks!

@serychristianrenaud 8 месяцев назад

Thanks

@kaushikravikumar7472 3 месяца назад

This is really cool! May I know what theme and font you are using here?

@manikantaprasadlopinti8375 8 месяцев назад

On the desktop view we can see the beauty of it

@frontendfyi 8 месяцев назад

🫡 - do you have a great example you want me to replicate? I feel every video I make of scroll animations is the same.

@w3mw 5 месяцев назад

Can I have a div with bg color with full-bleed and the content inside will be by default width? If yes, how? 😃

@richardpolderl3675 4 месяца назад

Is it possible to write all of this in tailwind somehow? I suppose it should be achievable with tailwind's `[ ]` notation somehow. Also how often do you use this? This feels like a great way to apply a grid to pages in general, do you have some templates that you often apply for new pages/designs?

@frontendfyi 3 месяца назад

For a single line grid I think that could work, but beyond that it won't unfortunately. Besides that I think making that based on an arbitrary value is just a little bit too much. Nothing wrong with adding this to the CSS file imo. I really like to use this setup for more text based pages (eg blog detail pages). I don't have any templates ready to go, I built it from scratch every time.