Building a Fancy Responsive Tile Grid with Tailwind CSS

hey what's up everyone in this video we're going to build this pretty cool responsive layout and we're going to use taylor and css grid utilities to achieve that let's get right into it all right so the other day doing some design browsing as i tend to do i found this website linspin which i found pretty interesting particularly this section here caught my attention so we basically have this two column layout with a title and then some team members and a little bit of text here when a bit more space is available the layout completely restructures at this break point here and i thought how easy would that be to build with tailwind css so the idea here is not to do a replicate of this ui at all but rather look at how we could lay elements out in a similar way that behave the same responsively starting with a mobile first approach using utility classes from tailwind okay i've taken two screenshots of this page that represent the two main states of this grid so we have here the narrow view that has two columns and then you can see that it jumps into a four column wide layout as a starting point i have a completely empty index.html page and we're going to write our code in here our css file is the default tailwind three directives and in our config file you can see we have the just in time mode enabled so things are nice and fast and i've also added an extra extra small screen here at the 540 pixel breakpoint just because we want to start with a completely one column stacked uh layout and start with the two column grid at this breakpoint looking at our two screenshots you can see we have the same elements but laid out in a different way and it would be tempting to start coding by adding the title and then the first image and then the paragraph text but what we're going to do is lay out the markup without worrying about the layout at all and then we're going to use css grids to organize the elements on the page like we want let's start writing some code and we'll start with a wrapper which is going to be a grid container so that's grid having a grid allows us to have a gap properly as well so i will go with gap 4 and to make it look a little nicer and not touch the edges of the viewport i'll go with p 4 for padding 4 and also a max width container of max with 5xl and so we're going to go inside this grid and like i mentioned lay the elements in an order that would make sense so i think it makes sense to start with the title here which can be our h1 so i'll go h1 and the title here will say grid layout with tailwind css and let's add some quick style to this h1 so i'm going to go with text for excel and font extra bold i think it makes sense to next have this paragraph of text as our second element so right there i'll have a paragraph tag and paste some lorem ipsum and then we're going to have our eight i believe one two three four five six seven eight yep image elements so we're not going to use images we're just going to use rectangles to illustrate the same layout so let's come here and let's give them a height so we can see them in a background of bg blue 500 so that's the first one and we're going to go two three four five six seven eight so you can see this nice spacing and this is due to the fact we're already using a grid and we have this gap properly and we've got one more element which is this bit of text here so we're going to have one more paragraph of text with a bit of lorem ipsum as well and as you can see for now uh it doesn't look great and also it's top and left align so one thing we can do quickly is on the body tag here add some classes and we're going to perfectly center our grid in the middle of the page so a grid and here we're going to go with place items center and we also need to apply a min height of screen and there you go you can see the vertical centering and now we can start implementing the first of the two layout which is a two column grid we're going to target the very first breakpoint and remember i've created this extra small breakpoint so we're gonna go xs and here we're going to define two columns with grid calls two and as soon as we hit the 540 i believe breakpoint we switch to two columns nice all right so let's zoom in a little bit in this section so we want to have the title to occupy the two columns of the first row so that's fairly easy to do in my h1 i can once again target the extra small breakpoint we want to spawn across two columns so call span two the title takes the two columns but we kind of want the heading to only span across half of it across one so one thing we could do is tell the h1 tag to be 50 width so excess and then width one and a half and yeah that works and that's probably fine but another thing you can do is define a grid within a grid so we could say these two columns here occupied by the h1 tag should be a grid as well and then inside the grid there's two columns so let me show you that quickly display grid to define a grid and this grid would have grid calls two two columns we could wrap our heading tag in a span like so and now if i take the background color here on the parent and i put it on the span instead so you can see its actual width you can see that the span is occupying one of the two cells now if you pay close attention you can see that the alignment is not perfect the yellow clearly bleeds into the gap of the parent grid on a grid here also set a gap of 4 which matches the parent grid and now we're going to occupy the exact correct amount of space good job as soon as we jump into a 2 column grid we kind of want to have more squarish looking elements so we closer to something like this so we could come here and select all our h16s and on the extra small breakpoint change that to age 32 but we're going to have to keep doing this at different break points and we kind of want some square looking shapes and we're going to use aspect ratio for that so tailwind css comes with an official aspect ratio plugin but here i'm going to use a new css property aspect ratio to keep things simple and show you how it works so let's jump in our css file i'm going to open an add layer utilities block and here i'll create a class called square and it's going to set the aspect ratio property to a ratio of 1 by 1. we want to keep the height of 16 here and then as soon as we reach the extra small break point we want to make these shapes become square on extra small break point before we make it square we're going to reset the height to auto so it can be whatever it needs to be and then on extra small break point as well we're going to use our square and boom look at this now elements are perfectly square and as the size changes they keep their proportion all the time which is really nice while we develop this section uh let's go with two by one so it's a little bit more easy to see everything in one go and we'll come and fix it later to be a square okay so here's now when things become interesting we want to take this paragraph here and if we look at our design you can see that it's not on the left it's on the right after the image so if you want this paragraph to be positioned here we can tell it to start at the row line two and start at the column line two so let's come in our paragraph element add a class and so for the extra small break point row start and we're gonna start with two and we also want it to start at the call start two you can see the text is also vertically centered here in this case we're gonna go with excess self center which is align self center and while we write it let's do the same for the bottom text and this bottom text is very selfish and very self-centered oh brother all right so let's go and make our squares square with ratio one by one and what we're going to do now is handle the bigger grids when it jumps into four columns so we're going to now focus on this one and again we're going to start at the top and try implement this and i think at the medium break point we can go with reads calls four so now when we pass this medium break point our grid is going to jump into four columns all right so let's start with our heading and we want now this heading to occupy three columns so in our h1 at the medium break point we're going to have call span 3 let's also increase the font size so md text let's go with 5 xl here and remember our text here is in the nested grid inside the main grid so we're actually using one and a half column so we want to update our nested grid the nested grid has two columns on the extra small breakpoint and on the medium it's going to have grid calls three but now this span is only using one column by default so we need to make it occupied two out of the three columns so md call span two so now it's going to use two of the three columns of this little internal grid within the grid all right so on the second row we want our paragraph text on the first two columns and you can see that right now the paragraph is still being told to start at the second row line and the second column line we want to start at the first column line here so let's find this paragraph and on the medium breakpoint we want to change this to call start one so call start one and now we want it to span across two rows and you can probably guess the utility to use here call span two and just to show you if i change the call start back to two it'll start at the second column three will start at the third etc so it's really flexible where you position your elements within the grid i think depending on the width of the column the text gets way too close here i can also at the medium break point add a padding right so i'm gonna go with pr let's go with 12. and yeah that looks nice a few moments later all right we're back so i think we can also boost the font size a little bit so md once again and text let's go with text lg and let's do the same treatment for the bottom one md text lg and while we are at this bottom one especially now that we made it bigger on the medium breakpoints we want this paragraph to span on two columns with call span two all right so this is looking pretty nice this is getting fairly close to what we want to achieve there's one subtle difference or not so subtle there is a gap here an empty grid cell so that's the element i'm talking about so here on the medium breakpoint i'm going to say call start to look at that it will push everything along little detail here this element is actually center aligned so here let's go with md text center and we'll also add some horizontal padding with px 4. [Music] and let's take a look at the design starting with two columns here and then moving into four columns and let's look at how we built this with css grid so we start with a single column stacked all together and we decide to use the order that makes the most sense for the content so the heading paragraph images and some text at the bottom and once we pass our initial extra small break point the layout switches to two columns our paragraph is manually placed on the second row and second column lines and the rest of it flows naturally and when we reach the medium break point the grid jumps into four columns this time the heading has three columns used and then within it two columns used for the text with one that stays blank and we have positioned our elements to span across two columns here and then placing this blue rectangle here on the second column start which allows us to push everything nicely all right that about wraps it up for this video thank you so much for watching and as always i will see you in the next one bye for now [Music] we did it we recorded this video i'm back [Music]

Channel: Tailwind Labs

Views: 23,536

Keywords:

Id: WJDw1J7FZnE

Length: 13min 28sec (808 seconds)

Published: Thu Aug 19 2021