Home How can I create two side by side grids one with text and one with an image on a solid background?

Questions

How can I create two side by side grids one with text and one with an image on a solid background?

August 25, 2023

Grids are made but text won’t center. The image won’t fill the entire grid area on the right it keeps getting cropped and stretched over the background panel.

I want it to be like:

Centered text "Welcome to website" + description (~20px or so of space) Centered Image

I’m new to web design and this is my first time posting so I’d appreciate any explanation 🙂

I tried making a background panel with two side-by-side grids. It ended up with text on the left stuck at the very top of the panel and a small image on the right extending beyond the border of the panel.

 .colored-panel {
    background-color: #6A1A2F;
    padding: 20px;
    height: 460px;
    text-align: center;  /* #making a solid colored background panel */
    color: #333;
}

.grid-container {  
    display: grid;
    grid-template-columns: 1fr 1fr;  /* #1:1 split of grid with spacing */
    grid-gap: 20px;
    color: white;
}

.apu-image {
    max-height: 100%;   /* #adding image */
    max-width: 100%;
}
/* -----------------------#cover to fit not sure what I'm missing? */

.colored-panel h1{.   
    padding: 10px;
    size: 60px ;
    text-align: center;
}  
/* #tried making text centered but I'm not sure how to make it centered      --------------------------with respect to its grid */

<div class="colored-panel">
    <div class="grid-container">
        <div class="text">
            <h1>Welcome to my website!</h1>
            <p>test</p> 
        </div>
        <div class="apu-img">
            <img class="apu-image" src="pics/apu.jpg" alt=""Picture of Apu Siqay>
        </div>
    </div>
</div>

>Solution :

Hey is this somewhat what you are looking for:

.colored-panel {
    background-color: #6A1A2F;
    padding: 20px;
    text-align: center;   #making a solid colored background panel
    color: #333;
}

.grid-container {  
    display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-gap: 20px;
    color: white;
  align-items:center;
}
.apu-image {
    max-height: 100%;   #adding image
    max-width: 100%;
  width:100%;
-----------------------#cover to fit not sure what I'm missing?
}

.colored-panel h1{.   
    padding: 10px;
    size: 60px ;
    text-align: center;}  #tried making text centered but I'm not sure how to make it centered      --------------------------with respect to its grid

<div class="colored-panel">
            <div class="grid-container">
                <div class="text">
                    <h1>Welcome to my website!</h1>
                    <p>test</p> 
                </div>
                <div class="apu-img">
                    <img class="apu-image" src="https://images.unsplash.com/photo-1686995309003-9a141da8a6e6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=2672&q=80" alt=""Picture of Apu Siqay>
                </div>
            </div>
        </div>

If so, the only thing you were missing was to define a width for the image in the grid to let it scale only within the grid. And to add align-items:center to the grid container to let the items be centered compared to other items in the same row.

Have a great day!