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

How to merge two row with two different column size in HTML

I want to merge "Text" to the other column under the "Picture"

Reference of the problem


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>grid</title>

        <style>
            body{
                margin: 0;
            }

            .container {
                width: 100vw;
                height: 100vh;
                font-family: 'Quicksand', sans-serif;
                font-weight: bold;
            
                display: grid;

                grid-template-columns: 0.5fr 1fr;
                grid-template-rows: 50px 1fr 1fr 100px;

                gap: 10px;
                padding: 10px;
                box-sizing: border-box;
            }

            .container div {
                border: 1px solid black;
            }
            .header {
                grid-column-start: 1;
                grid-column-end: 3;
            }
            .text {
                grid-row-start: 2;
                grid-row-end: 4;
                grid-column-start: 2;
                grid-column-end: 3;
            }
        
        </style>

    </head>
    <body>

        <div class="container">
            <div class="header">Header</div>
            <div class="pic">Picture</div>
            <div class="text">Text  </div>
        </div>

    
    </body>
</html>

This should be the output:

Should be the output after the problem fixed

↑↑↑
Use the link above for reference if it is confusing

↑↑↑The output that i want is in the link above i cant paste it here in description because there is an error sorry for the inconvenience

Tags:

2

Answers


  1. 0

    You can try this for the page view you are showing with flex.

    <!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>
      <div class="header">Here is your header</div>
      <div style="display: flex">
        <div>
          <img
            src="https://img.freepik.com/free-vector/realistic-credit-card-design_23-2149126090.jpg"
          />
        </div>
        <div>
          Here is lot of contentHere is lot of contentHere is lot of contentHere
          is lot of contentHere is lot of contentHere is lot of contentHere is
          lot of contentHere is lot of contentHere is lot of contentHere is lot
          of contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of contentHere is lot of
          contentHere is lot of contentHere is lot of content
        </div>
      </div>
    </div>
    
  </body>
</html>
    Login or Signup to reply.
  2. 0

    Edited answer:
    It might be easier to not use display grid for this, since you want the reverse L shape. I removed some of your CSS code and got this result, is this slightly close to your desired result?

    enter image description here

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

Back To Top
Search