Home>

You need to position 9 pictures with a square (like a ruby ​​cube). The result of the code in the picture. I tried everything, but it turns out some nonsense.

<
HTML >
≪
HEAD >
≪
Title >
Designer Menu <
/title >
≪
Style >
.first {
Display: Block;
Margin: 3 AUTO;
Margin-Right: 54.5%;
}
.second {
Display: Block;
Margin: 3 AUTO;
}
.third {
Display: Block;
Margin: 3 AUTO;
margin-left: 54.5%;
}
≪
/STYLE >
≪
/Head >
≪
BODY BGCOLOR= "# 2C2C2C" >
≪
img src= "images /1.png" class= "first" top: 500; >
≪
img src= "images /2.png" class= "first" >
≪
img src= "images /3.png" class= "first" >
≪
img src= "images /4.png" class= "Second" >
≪
img src= "images /5.png" class= "Second" >
≪
img src= "images /6.png" class= "second" >
≪
img src= "images /7.png" class= "third" >
≪
img src= "images /8.png" class= "third" >
≪
img src= "images /9.png" class= "third" >
≪
/Body >
≪
/HTML >
  • Answer # 1

    Make a grid so more convenient

    .wrapper {
      Display: Grid;
      Grid-Template-Rows: 1Fr 1Fr 1FR;
      Grid-Template-Columns: 1Fr 1Fr 1FR;
      Grid-Gap: 2VW; /* This is a kind of margin * /
    }
    
  • Answer # 2

    changed your code, now it works as it should.

    <
    HTML >
       ≪
    HEAD >
          ≪
    Title >
    Designer Menu <
    /title >
          ≪
    Style >
             Body {
               Background-color: # 2C2C2C;
             }
             .wrapper {
               DISPLAY: FLEX;
               Flex-Wrap: Wrap;
               Justify-Content: Space-Between;
             }
          ≪
    /STYLE >
       ≪
    /Head >
       ≪
    Body >
          ≪
    div class= "wrapper" >
             ≪
    img src= "images /1.png" >
             ≪
    img src= "images /2.png" >
             ≪
    img src= "images /3.png" >
             ≪
    img src= "images /4.png" >
             ≪
    img src= "images /5.png" >
             ≪
    img src= "images /6.png" >
             ≪
    img src= "images /7.png" >
             ≪
    img src= "images /8.png" >
             ≪
    img src= "images /9.png" >
          ≪
    /div >
       ≪
    /Body >
    ≪
    /HTML >