Question 237654 in Html Question posted in
Some basic documentation can be found here.

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

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>
Tags:

2

Answers


  1. 0

    in my opinion you can do this with flexbox.

       .colored-panel {
    background-color: #6A1A2F;
    padding: 20px;
    height: 460px;
    display: flex;          /* Use flexbox to center content vertically */
    align-items: center;    /* Center content vertically */
    color: white;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    color: white;
}

.text {
    text-align: center;     /* Center text horizontally */
}

.apu-img {
    display: flex;          /* Use flexbox to center image and retain aspect ratio */
    align-items: center;    /* Center image vertically */
    justify-content: center;/* Center image horizontally */
}

.apu-image {
    max-height: 100%;
    max-width: 100%;
    height: auto;       
}

    I hope it helps and that is what you meant. I’ve used flexbox to center the text and image vertically within their respective grid cells.

    Login or Signup to reply.
  2. 0

    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!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search