Building a Fancy Responsive Tile Grid with Tailwind CSS

[@hridoy8021]

We demand more videos from this guy! Such a legend of a teacher! Much love ❤️

[@simonswiss]

Thank you, you're very kind 🙏

[@AnthonyPinzone]

Haha I love the touch of humor... and I really love these vids. They've definitely accelerated my adaptation of Tailwind.

[@simonswiss]

I intend to creep more and more silly humour in going forward, so I got you covered 😅

[@akamfoad]

I gotta say the approach was brilliant, well done.

[@simonswiss]

Thank you! 🙏

[@edwassermann8368]

Amazing tutorial. Simple and to the point. The possibilities with this are endless.

[@khpeiris]

I'm so addicted to these videos man! So satisfying to watch!

[@talkathiriify]

Really excellent, and I love the way you explain complicated things to make them very smooth and easy to understand. Thank you so much.

[@yasirarfat58]

I am begginer of tailwindcss, your video resolve my different screen problem. Love your jokes.

[@enriqueshunnar6725]

Not scared of the grid anymore. Thank you Flynn.

[@DenisGitonga]

Thanks for another one. I am now able to replicate a design thanks to your videos. Waiting for more and more.

[@carlosarroyoam]

Thanks for this videos Simon, Tailwind is simply awesome.

[@azazinlove7514]

Very sad that there is no more vids from this great man :c

[@akifraza5097]

Explained in such a simple way ❤

[@TristanBailey]

That’s a good one. I still don’t use grid much as the sites we work on have to still work with old machines. Nice to see what things it can do abs in tw too

[@bigfoot131]

The dog n the kid distraction 😁. I love the fun touches u putting in.

[@surajdangi6492]

superbly explained

[@Tryto]

Awesome, Simon ! It's really a great topic

[@simonswiss]

Thank you - glad you enjoyed it! 🙏

[@hariskrajina956]

Beautiful, it has never been this easy

[@baarrd]

Polish site as an example - great! :D As a Pole I am proud of it :D

[@simonswiss]

🙏🇵🇱

[@MrAdnan252]

This sort of thing is great practice for learning responsive design

[@hammadasif]

🤯 Wow... Its so addicting to watch your videos. Keep up the good work!

[@AmbrozeSE]

Wow! this was everything I wanted. Thanks a lot.

[@ytserul9035]

this was great! very helpful since i'm new to learning css and html, i seem to have a good handle on it, but i've been working on a project and you helped me realise what i needed to fix my issue :D so thank you!

[@TailwindLabs]

Great to hear!

[@abelkibebe577]

Wow These is powerful, I am doing my react project with tailwind , this is a game-changing way of coding

[@kwadoskii]

Nice one. Just learnt about the CSS aspect ratio

[@linusjklett]

Hi, love the video. All your tutorials are awesome. I would love to use the Preview Plugin you use and I couldn’t really find a good Preview Plugin yet. Thanks in advance! #SwitzerlandGang🇨🇭

[@marcusmaunula5018]

Any chance you could do some flex/tailwind videos as well?

[@informatom]

I am surprised, that the xs:col-start-2 does not push all other elements further (the first blue box comes left to it), while the md:col-start-2 pushes all boxes along. Is this because of the xs:row-start-2? I am confused.

[@anderaranburu9087]

I am wondering the same...

[@tenc6491]

His contents are awesome. Also, I think he is a french. Vive la France!

[@simonswiss]

I'm actually Swiss - but from the French-speaking part of Switzerland 🇨🇭

[@ThugLifeModafocah]

Excellent content. How do you get those purple markups lines on your browser?

[@lamargillespie3787]

You're a lifesaver! awesome tutorial

[@vesper8]

Great video! Thank you! By the way.. what are you using to have the padding displayed all over the layout with little purple lines?

[@simonswiss]

That's the Firefox dev tools, they allow you to outline the Grid lines ✨

[@martinschweizer2681]

Great stuff very well presented. Thank you 👏

[@gokulprasanth3991]

Such a wonderful video, can you please tell me the name of extension's you used to measure & check alignment stuffs?

[@flutterquickdemo2468]

after a month. this was a good one

[@simonswiss]

Yeah, it's been a long time coming.

[@AyorindeAdesugba]

Thanks. Great tutorial - the aspect-ratio is not working though on Safari 14 (macOS).

[@AyorindeAdesugba]

I think I found the issue - following your example tailwind.css will not create responsive variants of the square class. I had to wrap this in @responsive. Is there another way to achieve this in the tailwind.config.js file?

[@MrSonicastra]

Thanks Simon for this video!

[@coledrain2158]

If you are having problems with the xs:square not working Wrap the .square class in the @responsive directive, like so: @responsive{ .square{ aspect-ratio: 1/1; } }

[@delulu6969]

I adjusted a bit and removed nested grid. The path in tailwind playground (since KZbin deletes comment with links): 4HM1tcRork

[@william3588]

simply awesome, love the tutorials

[@kmaphane]

Thanks for video. LooK forward to more.

[@anoorhakim20]

first time i see this, i know this gotta be great.

[@nachoijp]

very nice, but can you center a div?

[@larrasu]

Another amazing video. But can you please share your VS Code extensions specially the preview window? Thank you.

[@IAmSammyskills]

It is called "Live Preview". Author is Microsoft.

[@simonswiss]

I'm back! 😎

[@eleah2665]

A lot going on here! Thanks.

[@Allformyequine]

I luv this and also the fact that cause some giggling as I learn lol! Nothing like a Self Centered paragraph ... LOL

[@codelul]

Why does the col-start-2 push everything with the blue box while with the paragraph it only replaced it with the boxes

[@chrisjames278]

Awesome video, these are great!

[@bre3eze983]

Very helpful , thank you

[@nyambe]

Is xs: part of tailwind 3?

[@jimmyj.6792]

Awesome 😍 what did you use to display grid directly on your html ? I’m curious about it because it’s really more visual to explain grid system. Thanks a lot for this nice content as weel 🙏

[@travholt]

Firefox Developer Edition will show grid lines in dev tools.

[@simonswiss]

@@travholt Yep that's it! Chrome also shows the grid lines, but FF makes it look much prettier, so I picked that for the video 👍

[@jimmyj.6792]

@@travholt thanks a lot for this information 👌

[@iamthekingofchoco]

How did you get the browser preview window within vscode itself? I usually have to open another browser window (safari) and place vscode-safari side by side.

[@_h4x0r]

Wow, nice one! 😍

[@weblearningd2294]

Hi, Tailwind gives cross-browser compatibility to css-grid? Thanx

[@laughone]

Amazing videos keep it up..

[@richard_keep]

That effect on 'self-center'. HAHAHAHAHAHA

[@simonswiss]

Certified dad right there

[@tririfandani1876]

He's back. Let's goo

[@simonswiss]

I'm back!

[@ShovenaFamily]

Thanks for sharing !

[@willianf]

What "Preview" extension do you use in your VSCode?

[@SteveHiemstraAKAspeg]

Wait. Did you remove the music overlays? THANK YOU!!! 🙏

[@simonswiss]

Heh, this is the first video where I experiment with background music through the entire video to cover my kids/dogs in the background 😅

[@mc-ty4br]

Thank you!

[@adarshchakraborty]

My favourite channel

[@Matt36788]

I have no more excuses not to start using grids now

[@metacoder4912]

can i use this design for my website?

[@HelloWorld-fg2nm]

How come it's not squared at the xs layout?

[@abhijeet288]

What is editor font that he is using?

[@lounes03b99]

i realy enjoy in this video thanks❤🔥

[@hrayati]

Awesome. Thank you. 👌

[@abdeldjalil.hachimi]

Great video Thanks a lot

[@databrok3r]

god I love tailwind

[@jeonghyunkim901]

Great Voice! Thank you

[@ShaditoKun]

How can I activate these grid guides?

[@arhamshahversatile]

Suggestion: text-shadow utilities Thank you very much

[@osman3404]

THANK U THANK U and Plz more Grid videos :)

[@bassman2145]

Does anyone know what font is being used in the code editor?

[@MatviiRubets]

How do you preview your website in vs code?

[@kashnigahbaruda]

More please

[@Troy-ol5fk]

Does the 'min-h-screen' class center the element vertically ?

[@sduduzogumede1835]

No. Min h screen makes the element fill the whole screen vertically, adding "items-center" to a grid or flex element will center the children

[@AriRaouf-kq4le]

at 10:20 for the paragraph for meduim breakpoint when i add only md:col-span2 it span from the first column and i didn't add md:col-start-1? any one try it please? it should span from it's postion which is second column and sexond row,

[@GergelyCsermely]

Thanks.

[@nehandev]

Very cool..

[@alexamancio6761]

What's the name of that theme

[@khorajia]

What is Max w 5xl?

[@hendridgonzalez1765]

So great!

[@dibbyo456]

Awesome

[@forsh2966]

thank you :D

[@sornt]

tailwindcss is awesome !!!

[@EugeneBuvard]

looks great in the video, but I cc the code and it doesn't look the same..

[@VuNguyen-mi3hm]

It's just too good to be true

[@mohammad-hosseinhashemian6804]

thx a lot cuz of your useful content =)) it helps us a lot! keep going...

[@aghileslounis]

Brilliant as always my god !

[@misbahansori]

Hey Simon, what extension do you use to preview the HTML in vs code?

[@IAmSammyskills]

It is called "Live Preview". Author is Microsoft.

[@misbahansori]

@@IAmSammyskills Cool.. thanks..

[@clipartinc]

perfect!👊

[@davodaslanifakor4547]

You are wonderfull .... 😘😘😘

[@NoelDeMartin]

It would be great if you can add links to Tailwind Play with the code of these videos. I have one doubt about how something works, but it's too much of a pain to reproduce all the content by hand :(. In case anyone is wondering, the doubts I have is how come that defining the start for a cell on the xs breakpoint moves the cell forward, but the next cell is moved backwards, whereas in md the cell is moved forward but an empty cell is left behind. Shouldn't they have the same behaviour?

[@husnulaman]

Tailwind FTW

[@Dipenparmar12]

Aswsome tutorial.

[@darkvent]

Can somebody tell me, which font he using in vscode.

[@larrasu]

Dank Mono

[@darkvent]

@@larrasu do you also use this ?

[@larrasu]

@@darkvent Yup.

[@mayurravindra9433]

❤💙

[@CricketHighlights-nt7nn]

niceee