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

Html – CSS Flexible Grid Column Layout with Different Line Heights – How to Vertically Align Text to Top?

I’m working on a web layout where I need to create a flexible column structure with varying line heights. The goal is to have one column with a higher line-height while ensuring that both paragraph texts in different columns start from the top/same line position.

In my layout I need to make sure I could have either 1, 2 or 3 columns, title centred above its content.

I’ve tried to achieve this with the following HTML and CSS:

As you can see the text on the right in yellow does not start from exactly the same line as the text on the left.

<html>
    <head>
        <style>
            .columnA {
                color: white;
                margin-right: 15px;
            }

            .columnB {
                color: yellow;
                align-self: start;
                margin-bottom: 20px;
                vertical-align: top;
            }

            .comment.title {
                display: grid;
                color: yellow;
                text-align: center;
                margin-bottom: 20px;
                grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
            }

            .comment.columnA {
                color: green;
                line-height: 1.4;
            }

            .comment.columnB {
                color: yellow;
                line-height: 2.4;
            }

            .content {
                display: grid;
                margin-bottom: 20px;
                align-content: start;
                grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
            }

            .black-background {
                background-color: black;
            }
        </style>
    </head>
    <body class="black-background">
        <div class="comment">
            <div class="comment title">
                <p class="columnA">TitleA</p>
                <p class="columnB">TitleB</p>
            </div>
            <div class="content">
                <p class="comment columnA">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
                </p>
                <p class="comment columnB">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
                </p>
            </div>
        </div>
    </body>
</html>
Tags:

2

Answers


  1. 0

    There’s a workaround to utilize lh unit. By setting both of the paragraphs’ margin-top to -0.5lh to make both paragraph aligned.

    .comment {
  margin-top: -0.5lh;
}

    But because the paragraph are shifted upwards so you might want to compensate their vertical position with the margin-bottom of previous element or using a calculated margin-top such as:

    .comment {
  margin-top: calc(20px - 0.5lh);
}

    <html>
    <head>
        <style>
            .columnA {
                color: white;
                margin-right: 15px;
            }

            .columnB {
                color: yellow;
                align-self: start;
                margin-bottom: 20px;
                vertical-align: top;
            }
            
            .comment {
              margin-top: -0.5lh;
            }
            

            .comment.title {
                display: grid;
                color: yellow;
                text-align: center;
                margin-bottom: 40px;
                grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
            }

            .comment.columnA {
                color: green;
                line-height: 1.4;
            }

            .comment.columnB {
                color: yellow;
                line-height: 2.4;
            }

            .content {
                display: grid;
                margin-bottom: 20px;
                align-content: start;
                grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
            }

            .black-background {
                background-color: black;
            }
        </style>
    </head>
    <body class="black-background">
        <div class="comment">
            <div class="comment title">
                <p class="columnA">TitleA</p>
                <p class="columnB">TitleB</p>
            </div>
            <div class="content">
                <p class="comment columnA">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
                </p>
                <p class="comment columnB">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
                </p>
            </div>
        </div>
    </body>
</html>

    Be aware that lh unit hasn’t been widely supported yet. If you are targeting older browsers, you may also achieve the same effect with CSS variables:

    <html>
    <head>
        <style>
            .columnA {
                color: white;
                margin-right: 15px;
            }

            .columnB {
                color: yellow;
                align-self: start;
                margin-bottom: 20px;
                vertical-align: top;
            }
            
            .comment {
              /* default line-height */
              --lh: 1.4em;
              line-height: var(--lh);
              
              margin-top: calc(-0.5 * var(--lh));
            }
            

            .comment.title {
                display: grid;
                color: yellow;
                text-align: center;
                margin-bottom: 40px;
                grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
            }

            .comment.columnA {
                /* assign individual line-height from here */
                --lh: 1.4em;
                color: green;
            }

            .comment.columnB {
                /* assign individual line-height from here */
                --lh: 2.4em;
                color: yellow;
            }

            .content {
                display: grid;
                margin-bottom: 20px;
                align-content: start;
                grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
            }

            .black-background {
                background-color: black;
            }
        </style>
    </head>
    <body class="black-background">
        <div class="comment">
            <div class="comment title">
                <p class="columnA">TitleA</p>
                <p class="columnB">TitleB</p>
            </div>
            <div class="content">
                <p class="comment columnA">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
                </p>
                <p class="comment columnB">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
                </p>
            </div>
        </div>
    </body>
</html>
    Login or Signup to reply.
  2. 0

    Set .content{ align-items: baseline; } and remove .columnB { align-self: start; }:

    .black-background {
  background-color: black;
}

.comment.title {
  display: grid;
  color: yellow;
  text-align: center;
  margin-bottom: 20px;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.comment.columnA {
  color: green;
  line-height: 1.4;
}

.comment.columnB {
  color: yellow;
  line-height: 2.4;
}

.content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  margin-bottom: 20px;
  align-items: baseline;
}
    <body class="black-background">
  <div class="comment">
    <div class="comment title">
      <p class="columnA">TitleA</p>
      <p class="columnB">TitleB</p>
    </div>
    <div class="content">
      <p class="comment columnA">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      </p>
      <p class="comment columnB">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      </p>
    </div>
  </div>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search