Building in PUBLIC: React Image Layout with Flexbox and Grid - ACT 6: Styling an Image Gallery with Grid

ACT 6:
ACT 6:PART ONE:
INTRO/RECAP:

{ PREVIOUSLY: In the last ACT, we went real deep. We started by creating an ImageData.tsx file, which had an Array of objects, 6 objects. We introduced you guys to The Card component, we also saw in action the Card component, how it works. We used it in the ImagesFlex.tsx file. We also displayed/rendered contents from our Array in the ImagesFlex.tsx file. Also showed you guys how the page would look like without the Scss styles added to our ImagesFlex component. And lots more.}.

Link to ACT5 Here

The following events take place in ACT 6:

ACT 6:PART TWO:
Enhancing Active NavLink Styling:

One thing, before we go in like b*llets in g^nsh^t wounds in this Act, There's something I would like to revisit. When a NavLink is active, I am not too cool with the color we set it to. Let's change it.
So, let's go to our MainNavigation.module.scss, look for the .active class and change it from:

 .active{
            color: green;
  }

To this:

 .active{
            background-color: green;
            border-radius: 6px;
            padding: 0.25rem;
    }

What this code does, by now should be self explanatory. I want a background color of green, I want border-radius should be 6px. And border radius is gonna make the edges curved on all 4 sides. Then I want a padding of 0.25rem.

This is how the MainNavigation would look like now if a NavLink is active:

You can see that images-flex has a green background now because it is active.

ACT 6:PART THREE:
Rendering Data in Grid Format:

Alright then, we are done with displaying images with flex, now let's try and render the Imagedata content in a grid format. Are you ready?
If your answer is Yes, then let's get the party started.

I will be going into the images folder,then imagesGrid folder, and I will create a file there called imagesGrid.module.scss. You guessed correctly, to handle our styles. Afterwards, I will be going to the imagesGrid.tsx file. And I am going to type out this code in there:

import classes from "./ImagesGrid.module.scss";
import Card from "../../ui/card/Card";
import { Array } from "../imageData";


const ImagesGrid = () => {

    const shortenText = (text:string,n:number)=>{
        if(text.length > n){
            const shortenedText = text.substring(0,n).concat("...");
            return shortenedText
        }
        return text;
    }

  return (
    <div className={classes["main-container"]}>

      <div className={classes.heading}>
        <h2>ImagesGrid</h2>
      </div>

        <div className={classes["main-content"]}>
            {Array.map((item)=>{
                return(
                    <Card key={item.id} className={classes.card}>
                        <div className={classes["main-image"]}>
                            <img src={item.image} alt={item.name}/>
                        </div>

                        <div className={classes.content}>
                            <h5>{item.name}</h5>
                            <div className={classes.desc}>
                                {shortenText(item.description,10)}
                            </div>
                        </div>
                    </Card>
                )
            })}
        </div>

    </div>
  );
};

export default ImagesGrid;

Infact, it's almost identical to the code we used in ImagesFlex.tsx file.
Won't be explaining, lets go into the Scss file.

ACT 6:PART FOUR:
Styling the Grid Layout:

Now I will go inside my ImagesGrid.module.scss file and type out this code:

.main-container {
  width: 100%;
  padding: 1rem;

  .heading {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 1rem;
  }

  .main-content {
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: 30% 30% 30%;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    padding: 1rem;
    min-width: 30rem;

    .card {
      width: 100%;

      .main-image {
        width: 100%;
        height: 10rem;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
      .content {
        h5 {
          padding: 0.25rem;
          font-size: large;
          font-weight: bold;
        }
        padding: 0.5rem;
        text-align: center;
      }
    }
  }
}

As you can see, it's very similar to ImagesFlex.module.scss. So I will only be explaining the style I wrote for the .main-content, that's the one that has our grid.

EXPLANATION:
display:grid: This sets the tone for the grid to take place. It enables us to be able to achieve the grid layout.

justify-content: center: This code centers the grid horizontally

align-items: center: While this, centers the grid vertically

grid-template-columns: 30% 30% 30%;: This creates 3 columns for our grid. Meaning, we gonna have 3 cells that have a width of 30% each. Each of these columns/cells will take up 30% each of the container. Which means, 90% will be used in total

grid-column-gap: 1rem: This creates a space of 1 rem horizontally between each column

grid-row-gap: 1rem: Similar to the line above this code, But this creates a space of 1 rem vertically between each row.

padding: 1rem: This is to add padding or space inside our .main-content. Space of 1 rem.

min-width: 30rem: This can be tricky at first, but don't worry, as we move on you will get a hang of this bad boy. Here, it's used to set a minimum width of 30 rem for the .main-container, this will prevent the .main-container from shrinking below the set width on smaller screens

card: The .card has a width of 100%, which means each card will take up the full width of the grid cell it's placed in. Since each grid is set to 30% of the container's width, each card will visually take up the entire 30% of the container's width allocated to it.

Then for .main-image:
width: 100%: This sets the image container to take up the entire width of the card.

height: 10rem: Here we are giving the image container a height of 10rem.

overflow:hidden: This cuts off any part of the image that goes beyond the container boundaries.

for main-image img:
width:100% and height:100%: This allows the image to take the size of its container.

object-fit:contain: This code ensures the whole image is visible and scaled to fit.
etc.

So if we save our file and check the browser, this is what we got:

ACT 6:PART FIVE:
The Final Result:

Alright! Not bad! Not bad! We have been able to accomplish what we setout for: displaying the data from our mock database using display:flex and display:grid.
Didn't make it mobile responsive though, because I felt it was already too long. See you in the NEXT EPISODE, where we will take on an App even more challenging. See you in a couple of days' time. Bye for now.

Outro:
About the writer: Voke Bernard is a passionate {obsessive} and ambitious M.E.R.N developer. Building of Reactjs && Expressjs applications is all he does. He is currently open to work, Feel free to reach out.

Call to Action: If you enjoyed this act, stay tuned. Will catch you in EPISODE 2.