Styling Images with Grid

[00:00:00]
>> For this figure that comes right after this YouTube video I'm going to give it a class and the class is going to be, Featured-screenshots. Okay, and so that's gonna to give me a class that I can use to style this figure in a little bit more detail.

[00:00:24]
Here in my css, we can say figure.featured-screenshots, display: grid, grid-template-columns: 1fr 1fr 1fr, grid-template-rows: auto uto and a gap of 2rem. So that should set us up with three screenshots equally by each other and in two rows. That should give us the images in the top row and then the figure caption coming after that in theory.

[00:01:09]
Let's check in on how that's doing. All right, so if we take a look at our webpage so far, we refresh the page. What you're gonna see is we have a bunch of images that are all stacked on top of each other. And we have some captions that are in the wrong places and so forth.

[00:01:30]
So here is how we're going to have to fix this. What's going on is that if we scroll down into the project section of the webpage, which comes after the featured section, we have here figure display grid and we have figure image and we have figure a and all the rest of this.

[00:01:46]
This is overriding the styles that we have earlier in our document. So what I'm going to need to do is I'm gonna need to move the styles that I just put in place. And those styles are .project figure, .project figcaption and figure.featured-screenshots, all four of those. I'm going to remove from the featured section of the webpage here, the featured layer.

[00:02:15]
I'm going to go down to projects. I'm gonna scroll past all of the figure and figure capture styling there and come on down here to the bottom where I will paste in my additional styles here. So now I have .project figure as display block .figure caption, and the figure featured screenshots are all here.

[00:02:38]
When I save this and now go back to my webpage. Okay, so now we have our videos looking good. We have all of the images. They're all stacked on top of each other right here. Don't panic about that, we're gonna fix that in a moment, but the other images are looking okay.

[00:02:56]
All right, so we only see one image here because we have conflicting style that's happening. And our conflicting style is happening for section featured image. So if I find my section featured image style. So here in section featured image, I've actually told all of the images to display in the same place, which is in the first row in the first column.

[00:03:26]
And so those images are doing exactly what I told them to do. They are all displaying in the first row in the first column on the webpage. So we need to override them here inside of our later style so that they don't do that later in our document.

[00:03:45]
So I'm gonna scroll down to my figure.featured-screenshots image. I'm gonna add the style here. So section-featured .featured-screenshots img. So we'll make a more powerful selector and put it later in the document to override what came before. We'll say grid-column: revert, grid-row: revert. In other words, forget what you know about those images and where they are being located.

[00:04:23]
Get rid of them. That's what the revert keyword happens to mean. So if we save that and we go back into our Firefox here and hit refresh, now our images are all displayed, all one right next to each other. Yay, that is what we're looking for. Our caption is still bunched up here over on the side.

[00:04:45]
So let us get that working as well. And that is going to be right after .section-featured .featured-screenshots image. We'll say .featured-screenshots figcaption, and we'll say our grid column is 1/4 because we want that figure caption to stretch all the way across through three columns. Not be limited to just the first column.

[00:05:22]
So we're gonna put that in and grid-row: 2/3, okay? Take a look at the web page again. There it is. So now our figured caption stretches across the bottom of those three images. Now what I'd like to do is I'd like to make these into two columns, because again, this is too long of a line for easy reading.

[00:05:46]
Wouldn't it be nice if we actually had two columns of text and we can do that with the columns property. It's kinda cool. You might not have heard of this one before. So if we say our .featured-screenshots figcaption p. Paragraph inside of the figure caption that's inside of our featured screenshots.

[00:06:07]
We'll say columns: 2. So what this does is it takes a look at the lines of text, divides it in two and puts it into two separate columns, which is really great. And while we're here, let's put in a little extra margin. So margin-bottom: 5rem to give us a little bit of breathing room.

[00:06:28]
And when we take a look at our webpage again, now we have two lovely columns of text. It's a little bit easier to read. And this is done with newspaper style. So we are actually in the middle of a sentence here, styling buttons, audio players, hamburger menus and lists back up to the top.

[00:06:46]
More like reading a newspaper here with the columns property. Okay, this next image it should be stretching across the screen with some space around it. So it's kind of pretty well doing that right now, but it needs a little bit more space down here on the bottom. So let's take a look at that.

[00:07:13]
In my html, How did I do that, cool It is both annoying and very cool at the same time. Okay, so here in my html image for the diamond grid, we have a class of feature image that's associated with it. So we can use that for styling. I'm going to add to this for our .featured-image and I am going to say display: block and I'm gonna give it a margin of 5rem 0.

[00:07:55]
So that will give us a little bit of breathing room for that image. Okay, remember that margins in a vertical direction collapse, so we have some of that collapse that is happening here. And then now for this last image down here, this is a figure again. And I wanna set it up such that the image is on the right and the figure caption is on the left.

[00:08:23]
So let's set that up as well. Here in my html, I am going to go to my last figure here. This is the one. And what I'm going to do is give this a class. Class = "figure-portfolio". Okay, and then I can write a style for this one too.

[00:09:00]
,figure-portfolio. We'll say padding: 5rem 0. We'll say display: grid. We'll say grid-template-columns will be 1fr 1fr. So we'll have to equal columns. Grid-template-rows will be auto, make however many rows you need. We'll tell the items to align-items in the center. So this will put the text aligning in the middle of the image instead of at the top of the image, which is where it would go by default.

[00:09:46]
So align images puts it in the center and then a gap of 2rem. Okay, and if we take a look at that inside of our browser window, .project figure. .figure-portfolio is being overwritten by my .project figure that comes earlier in the set of styles, okay.