Css style

How to place a gridbox next to another gridbox – HTML & CSS – SitePoint Forums

I want blast box next to blast box


It’s a little tricky to figure out what your goals are, but this CSS Grid cheat sheet is a good place to figure out 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 an explosive box one of those little boxes or is it the whole set (4 boxes) and you just want another 4 boxes next to it on the right?

Or do you want the “Breath Usages” to take an entire horizontal line (like a header) and then 3 horizontal boxes below?

Or do you just want four horizontal boxes?

for example

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 looking awkward as we continually ask questions 🙂

However, as a starting point, you must have valid HTML because there is no point in dealing with layout until the HTML is correct.

This is not valid:

    Usages of blast

All content in one ul must be inside li Keywords.

This is also invalid:

`   
  • Mid range blast if aware of pattern but high risk
  • `

    The div cannot exist there because all the elements in the list (li) must be the direct children of their parent ul or ol.

    for example

    • Usages of Blast
    • Main source of engaging the opponent
    • Mid range blast if aware of pattern but high risk
    • Long range blast is less risky and unable to get pv

    However, it seems to be more appropriate as a dl list (like in my codepen).

    
    
    Usages of blast:
    Main source of engaging the opponent
    Mid range blast if aware of pattern but high risk
    Long range blast is less risky and unable to get pv

    Once you have the correct semantic HTML code, you can start styling it however you want (although sometimes the HTML code needs to be edited if the desired result is not achievable as is).



    1 like

    I want my boxes to line up vertically not horizontally.

    I want grid container 1 to be next to grid container 2, is that possible or not?

    Picture’

    Two containers side by side

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

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

    .Gridbox{ 
      display: inline-grid;
    }
    

    This would give this:

    Screenshot 2022-04-29 at 19.27.35

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

    However, it’s impossible for me to give you the full answer because I don’t know how you want it to behave or what content you can display. If, for example, one of the elements has more content or more content than expected, this is happening in your example.

    Screenshot 2022-04-29 at 19.30.56

    If you’re okay with that, the inline grid is fine, although you have to sort the HTML code as I mentioned before. Essentially, this type of layout doesn’t really need a grid anyway, because you’re not doing anything similar to a grid (but you can still use it).

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

    As I keep saying the devil is in the details and unless I know what comes next, I can’t fully answer your question in one go. This might sound like a “fingery”, but with CSS there are many ways to do the same thing, but usually there is a better way to do it when the full depth of the context is known. :slight_smile:



    2 likes