Help to get some grid code working please

1

I am very new to this so apologies in advance, I’m guessing this is quite a simple solution but I just cant seem to get it working
I am after html code and CSS for a grid system for 3 boxes, evenly spaced across the page on one line, each box with a different colour. With text in each box: Headings: ’ BUY’, ‘SELL’ and ‘WANTED’ . Underneath the heading, In each box, a text link: ‘Search | List Ad’
To look like this:

3 buttons
3 buttons1920×431 121 KB

So far, I have this code for the html:

<div class="wrapper">
<div class="box a">BUY</div>
<div class="box b">SELL</div>
<div class="box c">WANTED</div>
</div>

(This is not showing the code, but displaying as a webpage for some reason, sorry!)

And this code for CSS:

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

.box  {
  background-color: #0e6ef4;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

Any help would be greatly appreciated :slight_smile:

3

Do you want the spacing between the boxes to be fixed or fluid?

If you add justify-content: space-evenly to the grid you will get fluid evenly spaced elements. If you add a max-width and margin auto, you get a fixed width.

The rest is not really CSS grid related, but whatever.
https://jsfiddle.net/aj9qxgf1/

4

Thanks for your reply. I think fluid is best. Thanks very much for the code, the CSS is showing problems, is there excessive code in there I can delete?

5

Thank you, will keep that in mind

6

If you mean the gap property, that is just jsfiddle. You can switch it out for grid-gap which is the old (deprecated) property name. The grid-gap property will still work as it is now just an alias for gap. On browsers that support CSS Grid but do not receive updates you would have to use grid-gap.