Three columns of different width HTML

Three columns of different width HTML
0
#1

Hey everyone, I feel like this should be easier than it seems but nonetheless I can’t get anything to work.

I’m trying to make three columns in a section of my Portfolio (the “About” section in the middle flanked by the “HTML5” and “Bootstrap” Placeholders, where I intend to put image icons). Ideally I would want the middle section about 50% of the screen compared to 25% each on the sides. I’ve tried making a row with columns and set the width on CSS but that didn’t work, and tried the “col-md-6” grid method which didn’t work either. Scratching my head on this one any help would be much appreciated! The project: https://codepen.io/MarcelPenn/pen/EeBovx?editors=1111 The section is down a little ways and has identifying comments above it, sorry my code is a mess atm EDIT: There’s currently no matching CSS for that section.

#2

Hi. It should be work fine with grid.

#urContainer {
  disply: grid;
  grid-template-columns: 1fr 2fr 1fr;
}
#3

Thanks, I’m still running into issues as if there’s overlap or padding on the outside of the outer columns but I still can’t find the issue. After using your suggestion the columns are still tightly packed in the middle…

#4

You have a wapper ( .myContainer) inside your container that disrupt everything ^^

The html should appear like this:

<div class="gridContainer">
  <div class="col_1">First column</div>
  <div class="col_2">Second column</div>
  <div class="col_3">Third column</div>
</div>
#5

Can you explain this a little further? Do you mean the with the id=“About” tag? Other than that the format looks the same to me unless I’m missing something…

#6

I got it now, I had two separate grids molded into one lol. I must have started a grid, forgot about it, and came back and missed. Thanks a lot for helping with my ineptitude! haha