Card Layouts with Flexbox & Grid

[00:00:00]
>> Now that we have all of the HTML in place, let's turn to our CSS and we're gonna start with laying this out with our mobile dimension of the website. So one of the things that I'm struck by here as I started to work on this system immediately is the following.

[00:00:19]
I have this mixed media and Anni Roenkae listed right after that. And if you notice, there's a big gap in between them and they kinda look similar, their font is slightly smaller. But if we map this to a trend that we see right now in the design industry, often that the little text on the top that mixed media will be displayed at a smaller font and it will be all in uppercase, and then after that we'll have Anni Roenkae which will be in larger letters.

[00:00:46]
So let's fix our styling here so it looks closer to that. So we're gonna start here with artists h4 and the way we can style this is pretty simple, we'll just say, text, transform, uppercase. And then we'll say our font weight is normal and then finally our font size will be 0.8 rem and that will get us to a tiny uppercase font that is not bolded.

[00:01:26]
Remember, of course, it's bold by default, all the headings are coming from your browser stylesheet. The gap in between mixed media in Anni Roenkae is caused by margin, that margin happens both on the h4 and on the h3. All of the headings have some default margin associated with it.

[00:01:45]
Be aware that when two margins intersect inside of your style-sheet, they don't add together, they actually collapse into a single margin. This is a really important feature if you think about paragraphs, a series of paragraphs, we don't wanna have a giant double space in between paragraphs, we wanna have the same type of spacing in between them.

[00:02:07]
So as to margins meet they do collapse. So here on my h4, if I set the margin to zero, we won't see anything collapse here at all, it will look exactly the same but stuff has happened, we've actually turned off the margin. The top margin here is coming now from the bottom of the h2, the margin that's underneath of the text for mixed media is coming from the top of the h3.

[00:02:34]
So let's set that up as follows, artists age three, we're gonna say margin top of 0.3 Ems. We could set that to zero if you wanted, if you just set it to a straight zero, it looks a little bit tight. So I've set it to 0.3 Ems, which gives us a little bit of breathing room between those.

[00:02:59]
That's an art decision and you can change that however you like. Now that we've got that in place, let's focus on styling the cards themselves and the content inside of those cards. So we make the visual side of this a little bit smaller. Just for fun, we could start with flexbox.

[00:03:22]
So, we'll work with the article wrap portion of our HTML. Remember that is the div that wraps around all of the articles that we're working with here, so we'll set that up, article wrap. And we'll say Display. Flex, we'll say flex flow because, of course, by default Flexbox will very helpfully set that all up as a series of columns inside of a row.

[00:03:55]
That's not what we wanted a mobile dimension. So we'll say our flex flow is a column wrap, and then the gap will be one rim in between each one of those columns. So that's just sets everything up going here horizontally down the page. [SOUND] so far, so good.

[00:04:13]
But wouldn't it be more interesting if we made this a little bit better? Part of the problem with having these giant images is that it makes the page very long for scrolling here on mobile. So wouldn't it be more fun if we had a smaller image with the text next to it?

[00:04:30]
That would be kind of cool looking and it wouldn't be all that hard to do when we leverage grid. So we have a basic layout here for our mobile layout. We have exactly what you would expect at a mobile dimension. We have our HTML and our images all stacked on top of each other really nicely.

[00:04:48]
The images look great, they're nice and big, they're easy to see but it does make for a long scrolling web page. Wouldn't it be nice if instead we had a two column layout on mobile and we could have an image taking up one of those columns and next to it we could have all of the text.

[00:05:05]
That may not look possible with what we have here but thanks to grid this becomes a really easy layout to do, so let's set that up. So now the articles will wind up being our containers for all of the elements inside of it. So if we just take a quick peek inside of one of our articles here, you see that we have an h4, an h5, an image, and two paragraphs.

[00:05:32]
That winds up being five elements that are children of the article. So, in our layout here, as we plan it, we'll set this up as our article wrap, article, and then we're going to tell it to display as grid. And we're going to give it two columns, grid template columns of 1fr 1fr and then five rows, grid template rows, repeat parentheses five comma auto.

[00:06:13]
So what will happen here is that by default grid is going to assign each element inside of the card its own row. So there we go, we have one element here each inside of this card, and we've called for two columns, so what grid has done is it put the the heading in one, the image in the other, the text in the other and the visit the website and the other.

[00:06:36]
So we're just sort of alternating as we go on down the page here. We need to clean that up a little bit as well. So let's add to this more styles, article rap, article star. Remember, star is the universal selector, so we're saying that for all of the elements inside of an article, inside of our class of article wrap, do the following.

[00:07:04]
We're going to say, we wanna put everything in grid, column 2/3. So we're gonna put everything over in the second column, see how the page jumps, everything goes over to the second column, which is great. And I'm also gonna turn off the margin on the top, margin top of zero, that way things will tighten up in their spacing a little bit which you'll see why here in just a moment, then we'll make an exception to this rule for our images.

[00:07:33]
So for article wrap, image, that article image, then we're going to say, we want a grid column of 1/2. So we want the images over on the left hand side, so there it is, and it's going to put it in the row that most closely matches to just the regular flow of the HTML.

[00:08:04]
So it sort of looks like it's in the middle and the spacing is all wonky. The way we fix that is by saying, then our grid row will be 1/6. And what that will do, is have her image span over all six or all five of our rows and the content here, now will snap up together and compact itself very, very nicely on the right hand side, which is totally awesome and amazing.

[00:08:39]
We probably need a little bit more gap here in between our article wraps and our columns, so let's add that, it's looking a little bit crowded over there. So I'm gonna say a gap here in my article wrap article of zero and then one rim. And that'll put some space there in between our image and the text.

[00:09:00]
So that's pretty cool. That gives us the image next to the text. The HTML order is what it is and we have a lovely layout here for mobile dimensions. It starts to get a little bit big as we get larger, so let's deal with that by writing some more media queries.

[00:09:19]
So here at media with a min width of 650 pixels. And our article wrap, We're gonna say once again display grid. This overrides the earlier declaration we had for flexes and flexbox, now we're going to tell it to display as grid and then we can say our grid template columns are repeat 2 comma and then of course we can use our friend min-max, min-max.

[00:10:04]
10 pixels comma 1fr. So if you're not familiar with min-max, this is something you can include inside of CSS grid. This is designed to make sure that your grid cell are good and they don't get too entirely small. It is possible that your grid cells shrink down so small that that they just look terrible.

[00:10:27]
So this is a technique that Chris has described it on his CSS [INAUDIBLE] website, so this is something that you can incorporate anywhere along the way, I haven't done so in the grid course to this point, mostly because I wanted to get familiar with the notation. This is something else you can add on as a layer of security to make sure your cells don't get too small.

[00:10:48]
So if we widen this page, now we're gonna wind up with two columns and you'll see here that we have a very lovely layout here at tablet dimensions. But we can now do one additional level of craziness here when we get to desktop and completely change the look of this site again.

[00:11:10]
So here, so we'll say @ media and min width, you probably wanna say something like 1000 pixels on your end. I'm gonna say something like 800 pixels here because I have a smaller screen and limited size that I'm working with. And so here, let's change up our display again with article wrap and am going to say my grid template column are gonna be repeat four comma and then mini-max.

[00:11:47]
Inside of these ten pixels comma 1fr, so now I'm telling grid to set us up with four columns instead. So that's the way it looks right now. Those pictures are a little bit small. So let's clean that up a little bit. When we go to our article wrap article, Now we'll say our grid template columns, so remember, this is inside of the article.

[00:12:19]
Previously, we've had two columns one with the image one with everything else. Now I'm gonna change that to simply one column, 1fr, that's all I want. You can do a min-max on that too if you want, min-max. Maybe it's a minimum of 100 pixels comma 1fr, something like that.

[00:12:39]
It doesn't always have to be 10 pixels, it could also be Ems or Rems or percents or viewport widths or whatever makes sense. I just happen to be using pixels here. Okay, then we need to specify our rows again. So our grid template rows, repeat: 5, auto, whoops.

[00:13:13]
Comma auto. So that's how that's looking. And we can set up our gap with that. 01 m And then, now the last part of this is to rearrange what we have here and get the image back into the same location as our text. So we can set that up as follows.

[00:13:47]
We'll say our article wrap Article star, in other words, for all of the elements, we want them to occupy our grid column of 1/2. Okay, make sure that they all occupy the same column. That's a good start. And then for the image itself, if you like it this way with the image at the top, you can absolutely do that or you could rearrange this, article Article image.

[00:14:24]
Here we might say something like, our grid column is definitely still 1/2. Our grid row though, if you want it to go back to its original location in the source code, so after the headings we would just say, auto, and that will move the image to where it would normally occur in the source order right after the headings as we had it before.

[00:14:52]
And we could also be give that a bit of margin on the bottom of one rem. So we give it a little bit of spacing here on the page. So now we have a wild and crazy layout here where we've got four columns with headings on the top and images in the middle here at the desktop, when we go to our tablet dimension, we wind up with two main columns each of which with two sort of separate columns, the image on the side, the text next to that.

[00:15:22]
And then when you narrow this up even further, we have two nice columns with the text on one side and the image on the other, so image is always big and visible. Very important when you're talking about artists. If he wanted to take this to the next level, you could do something interesting like giving background colors here on some of the cells, maybe not all of them.

[00:15:43]
You could do some styling with the link to the visit the websites, maybe those turn into some kind of button. You could definitely do fun things here with the fonts. We worked with a single Arial font here, it's pretty vanilla looking. So if you added some more interesting contrasting fonts, you could wind up making this look more interesting as well.

[00:16:04]
You could add some border radius or a border on the image itself to jazz that up a bit. There's all kinds of things you can do with cards to take the layout that I've just given you here to the next level and make a really exciting looking web page.