Difficulty arising from a CSS positioning issue with a 'menu' element

Question

Difficulty arising from a CSS positioning issue with a 'menu' element

Having a div named "NormalInventory" with 32 children, each measuring 85px x 85px except for one which is larger at 175px x 175px, positioned relatively and displayed inline-block creating a CSS "list". Due to the size discrepancy, there are gaps in between the smaller boxes. How can these empty spaces be filled?

Here's a screenshot of the current layout:

https://i.sstatic.net/odn5G.png

And here's an edited version using paint to show how it should look:

https://i.sstatic.net/dSjfd.png

HTML structure:

<div class="NormalInventory">
    <div class="children">
        ...
    </div>
</div>

.NormalInventory {
    position: absolute;
    height: 100%;
    width: 100%;

    .InventoryItemPlaceholder {
        position: relative;
        display: inline-block;
        background-color: #070707E6;
        left: -5px;
        margin-left: 5px;
    }
}

css

Answer 1

Answer №1

To achieve the desired effect, CSS Grid can be utilized instead of using inline-block for elements. Simply add a display: grid to the parent element and set columns to repeat(4, 1fr), which creates 4 equal columns with 1 fraction each. The Grid system will automatically manage the rows.

For the larger element, apply span 2 to both grid-column and grid-row.

.App {
  border: 1px solid black;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  max-width: fit-content;
}

.box {
  background: black;
  height: 85px;
  width: 85px;
}

.big {
  height: 175px;
  width: 175px;
  grid-column: span 2;
  grid-row: span 2;
}

<div class="App">
  <div class="box"></div>
  <div class="box big"></div>
  <div class="box"></div>
</div>

Answer 2

To achieve the desired effect, CSS Grid can be utilized instead of using inline-block for elements. Simply add a display: grid to the parent element and set columns to repeat(4, 1fr), which creates 4 equal columns with 1 fraction each. The Grid system will automatically manage the rows.

For the larger element, apply span 2 to both grid-column and grid-row.

.App {
  border: 1px solid black;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  max-width: fit-content;
}

.box {
  background: black;
  height: 85px;
  width: 85px;
}

.big {
  height: 175px;
  width: 175px;
  grid-column: span 2;
  grid-row: span 2;
}

<div class="App">
  <div class="box"></div>
  <div class="box big"></div>
  <div class="box"></div>
</div>

Answer 3

Answer №2

    .parent{
      display: flex;
      width: 355px;
      justify-content: space-between;
      flex-wrap: wrap;
      position: relative;
    }

    .child{
    width: 85px;
    height: 85px;
    background: black;
    margin-bottom: 5px;
    }

    .child--big{
    width: 175px;
    height: 175px;
    position: absolute;
    top: 90px;
    left: 90px;
    background: black;
    }

    <div class = "parent">
      <div class = "child"></div>  
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"--make bigger"></div> 
    </div>

Answer 4

    .parent{
      display: flex;
      width: 355px;
      justify-content: space-between;
      flex-wrap: wrap;
      position: relative;
    }

    .child{
    width: 85px;
    height: 85px;
    background: black;
    margin-bottom: 5px;
    }

    .child--big{
    width: 175px;
    height: 175px;
    position: absolute;
    top: 90px;
    left: 90px;
    background: black;
    }

    <div class = "parent">
      <div class = "child"></div>  
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"></div> 
      <div class = "child"--make bigger"></div> 
    </div>

Answer 5

Answer №3

Consider using a grid for a simpler solution:

.container {  
  display: grid;
  grid-template-columns: 85px 85px 85px 85px;
  grid-template-rows: 85px 85px 85px 85px 85px 85px 85px 85px;
  gap: 5px 5px;
  grid-auto-flow: row;
  grid-template-areas:
    "a1 b1 c1 d1"
    "a2 bigBlock bigBlock d2"
    "a3 bigBlock bigBlock d3"
    "a4 b4 c4 d4"
    "a5 b5 c5 d5"
    "a6 b6 c6 d6"
    "a7 b7 c7 d7"
    "a8 b8 c8 d8";
}
.bigBlock { grid-area: bigBlock; }
.a1 { grid-area: a1; }
.a2 { grid-area: a2; }
.a3 { grid-area: a3; }
.a4 { grid-area: a4; }
.a5 { grid-area: a5; }
.a6 { grid-area: a6; }
.a7 { grid-area: a7; }
.a8 { grid-area: a8; }
.b1 { grid-area: b1; }
c1 { grid-area: c1; }
.d1 { grid-area: d1; }
d2 { grid-area: d2; }
d3 { grid-area: d3; }
b4 { grid-area: b4; }
b5 { grid-area: b5; }
b6 { grid-area: b6; }
b7 { grid-area: b7; }
b8 { grid-area: b8; }
c4 { grid-area: c4; }
c5 { grid-area: c5; }
c6 { grid-area: c6; }
c7 { grid-area: c7; }
c8 { grid-area: c8; }
d4 { grid-area: d4; }
d5 { grid-area: d5; }
d6 { grid-area: d6; }
d7 { grid-area: d7; }
d8 { grid-area: d8; }

Answer 6

Consider using a grid for a simpler solution:

.container {  
  display: grid;
  grid-template-columns: 85px 85px 85px 85px;
  grid-template-rows: 85px 85px 85px 85px 85px 85px 85px 85px;
  gap: 5px 5px;
  grid-auto-flow: row;
  grid-template-areas:
    "a1 b1 c1 d1"
    "a2 bigBlock bigBlock d2"
    "a3 bigBlock bigBlock d3"
    "a4 b4 c4 d4"
    "a5 b5 c5 d5"
    "a6 b6 c6 d6"
    "a7 b7 c7 d7"
    "a8 b8 c8 d8";
}
.bigBlock { grid-area: bigBlock; }
.a1 { grid-area: a1; }
.a2 { grid-area: a2; }
.a3 { grid-area: a3; }
.a4 { grid-area: a4; }
.a5 { grid-area: a5; }
.a6 { grid-area: a6; }
.a7 { grid-area: a7; }
.a8 { grid-area: a8; }
.b1 { grid-area: b1; }
c1 { grid-area: c1; }
.d1 { grid-area: d1; }
d2 { grid-area: d2; }
d3 { grid-area: d3; }
b4 { grid-area: b4; }
b5 { grid-area: b5; }
b6 { grid-area: b6; }
b7 { grid-area: b7; }
b8 { grid-area: b8; }
c4 { grid-area: c4; }
c5 { grid-area: c5; }
c6 { grid-area: c6; }
c7 { grid-area: c7; }
c8 { grid-area: c8; }
d4 { grid-area: d4; }
d5 { grid-area: d5; }
d6 { grid-area: d6; }
d7 { grid-area: d7; }
d8 { grid-area: d8; }

Difficulty arising from a CSS positioning issue with a 'menu' element

Answer №1

Answer №2

Answer №3

Similar questions

Struggling to properly align a div on top of an image

On mobile devices, the Next.JS application (featuring Chakra UI) does not stretch to full width

The CSS styles within the GridView are not appearing on the page after an AJAX update

Sending the servlet response back to the original JSP page

The presence of text is leading to CSS placement troubles

CSS - Incorporate the value of the counter() function as a property value

The image filter plugin is functioning properly in one project, however, it is not working in

Center align the text inside a table cell of a span that is floated to the right and has a varying

The text on the asp:Button displays incorrectly in IE8+

Verifying CSS updates with Capybara detection

Discovering the element's class within an each loop

The title for beforeShowDay in bootstrap-datepicker is not functioning as expected

How can I align an image and text alongside another image using HTML and CSS?

Close the ionicPopup by tapping anywhere

Generating a hyperlink to a specific user ID within a data table

Is it appropriate to include JavaScript and CSS in views?

Is there a way to create an effect where the color of a floating action button changes when you hover over it, similar to a filter?

Floating left and right positions for a fixed CSS div

Error in Layout of Navigation Panel and Tabbed Pages

Unable to modify element attributes in css with tag selectors