Help to get some grid code working please

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:

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>

(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:

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.


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.

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?

Thank you, will keep that in mind

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.