How do I fix this alignment in css

If you can add a bit more of that code it would be helpful, but for now what i can suggest, if your elements are in the correct order with Grid, leave it like that, but you need to align-items: center; for the correct vertical alignment (aligned to the center means they won't start at the same position, for that you need to use: align-items: start;, and for the horizontal alignment you should use justify-content: center; .

Try this and if it is still disproportionate, check the margins and if that does not work, update the post with more of that code.

You can edit padding, by set padding-top: 0

and you can align text to center by text-align: center

body {
  margin: 40px;
}

.wrapper {
    display: grid;
    grid-template-columns: 200px 200px 200px;
    grid-gap: 10px;
    background-color: #fff;
    color: #444;
}

.box {
    text-align: center;
    background-color: #444;
    color: #fff;
    padding: 0px 20px 20px 20px;
    font-size: 150%;
}

<div class="wrapper">
        <div class="box a">AAAAAA AAAAAA</div>
        <div class="box b">BBBBBB BBBBBB BBB</div>
        <div class="box c">CCCCCC CCCCCC CCC CCCC</div> 
</div>