How to put gridbox next to another gridbox

I want blast box to be next to blast box

It’s a bit hard to understand what your goals are, but this CSS Grid cheat sheet is a good place to get your head around how it works .

1 Like

I’m glad it’s not just me then :slight_smile:

The problem is that we don’t know what a blast box is :slight_smile:

Is a blast box one of those little boxes or is it the whole thing (4 boxes) and you just want another 4 boxes alongside it to the right?

Or do you want the “Usages of blast” to take one whole horizontal line (like a header) and then 3 horizontal boxes underneath?

Or do you just want four boxes horizontal?

e.g.

If you take a little more time to explain your criteria more explicitly it will help us to help you more easily and without us appearing awkward as we continually ask questions:)

However as a starting point you must have valid html as there is no point in addressing the layout until the html is correct.

This is invalid:
<ul>Usages of blast</ul>

All content in a ul must be inside li tags.

This is also invalid:

`   <div class="Grid G3"><li>Mid range blast if aware of pattern but high risk </li></div>`

The div cannot exist in that place as all list items (li) must be direct children of their parent ul or ol.

e.g.

<ul class="gridbox">
  <li>Usages of Blast</li>
  <li>Main source of engaging the opponent</li>
  <li>Mid range blast if aware of pattern but high risk </li>
  <li>Long range blast is less risky and unable to get pv</li>
</ul>

However that looks as though it would be more suitable as a dl list instead (as in my codepen).


<dl class="gridbox">
  <dt>Usages of blast:</dt>
  <dd>Main source of engaging the opponent</dd>
  <dd>Mid range blast if aware of pattern but high risk</dd>
  <dd>Long range blast is less risky and unable to get pv</dd>
</dl>

Once you have the correct semantic html then you can start styling it as you wish (although sometimes the html may need to be modified if the desired result is not achievable as it stands).

1 Like

I want my boxes to line up vertically not horizontal.

I want grid box container 1 to be next to grid container 2, is it possible or no?

Picture’

Two containers next to eachother

I’ll read your bottom half of wall of text later.

At the simplest level you could just use display:inline-grid instead of display:grid in your example.

.Gridbox{ 
  display: inline-grid;
}

That would result in this:

Screen Shot 2022-04-29 at 19.27.35

Here is my codepen updated to show side by side boxes:

However it is impossible for me to give you the full answer as I don’t know how you want it to behave or what content you may be showing. If for example one of the elements has more content or greater content than you expect then this happens in your example.

Screen Shot 2022-04-29 at 19.30.56

If that is acceptable to you then inline grid is fine although you will need to sort out the html as I already mentioned. In essence that type of layout does not really need grid anyway as you aren’t doing anything grid like (but is still fine to use).

If however each new block needs to have rows that match across all blocks (like table rows etc) then that would require a completely different strategy other than using fixed heights to maintain consistent rows.

As I keep saying the devil is in the detail and unless I know what comes next I can’t answer your question fully in one go. It may seem like ‘nit-picking’ but with CSS there are many ways to do the same thing but generally there is a best way to do it when the full depth of the context is known :slight_smile:

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.