Grid text alignment


Joined
Feb 13, 2021
Messages
3
Reaction score
0
Hi,

Using a grid on a webpage but the text ALWAYS is centred - why?

.gridsidebarleft {
background-color: lavender;
display: grid;
grid-gap: 5px;
padding: 5px;
text-align: left;
grid-template-columns: 2fr 3fr;
grid-template-areas:
'a b';
}
.sideleft {
grid-area: a;
border-style: solid;
border-color: black;
}

.panel {
grid-area: b;
border-style: solid;
border-color: black;
}


<div class="gridsidebarleft">

<div class="sideleft">
<h3>The sidebar</h3>
<p>
Some meaningless text to see how this works.
It should be left-aligned, but might not be.
</p>
<p>
Some more just to make it visually better.
</p>
</div>

<div class="panel">
<h3>The main panel</h3>
</div>
</div>

1613256796380.png


How do I force the text to align correctly?

TIA,

Dermot
 
Ad

Advertisements

Joined
Nov 27, 2019
Messages
142
Reaction score
22
The code you provided works just fine. The image shows more then the code resolves to when I run it. IE.: The blue tag line stuff does not appear. So something else in your code is causing the problem. I would comment out all the CSS except for the three rules you show - things should be good for that small section of the HTML in your browser. Then slowly add a rule - one at a time until your text centers.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top