Inventory 5x9 Combine fields-CodePudding

I have such a 5x9 grid

.box5x9 {
  width: 300px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background-color: #15110F;
  padding-top: 20px;
  padding-bottom: 20px;
  margin: 0 auto;
}

.modulo,
.modEsp {
  background: #121110;
  cursor: pointer;
  color: #FFF;
  font-size: 0.7em;
  text-align: center;
  width: 50px;
  height: 50px;
  margin: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 2px solid #342F28;
}

.modulo,
.marca,
.desmarca {
  -webkit-transition: 500ms;
  -moz-transition: 500ms;
  -o-transition: 500ms;
  transition: 500ms;
}

.modulo:hover,
.marca:hover,
.desmarca:hover {
  background: #5555554b !important;
}

<div >
  <section >
    <div >
      <div  data-x="1" data-y="10" data-a="9"><img src="https://pl-wiki.metin2.gameforge.com/images/7/7d/Ostrze_Z_Czerwonej_Stali.png"></div>
      <div  data-x="2" data-y="10" data-a="19"><img src="https://pl-wiki.metin2.gameforge.com/images/0/0b/Czer._Kaptur_z_Pom.+.png?"></div>
      <div  data-x="3" data-y="10" data-a="29"><img src="https://pl-wiki.metin2.gameforge.com/images/0/0b/Czer._Kaptur_z_Pom.+.png"></div>
      <div  data-x="4" data-y="10" data-a="39"><img src="https://pl-wiki.metin2.gameforge.com/images/0/0b/Czer._Kaptur_z_Pom.+.png"></div>
      <div  data-x="5" data-y="10" data-a="49"><img src="https://pl-wiki.metin2.gameforge.com/images/7/7d/Ostrze_Z_Czerwonej_Stali.png"></div>
      <div  data-x="1" data-y="9" data-a="8"></div>
      <div  data-x="2" data-y="9" data-a="18"></div>
      <div  data-x="3" data-y="9" data-a="28"></div>
      <div  data-x="4" data-y="9" data-a="38"></div>
      <div  data-x="5" data-y="9" data-a="48"></div>
      <div  data-x="1" data-y="8" data-a="7"></div>
      <div  data-x="2" data-y="8" data-a="17"></div>
      <div  data-x="3" data-y="8" data-a="27"></div>
      <div  data-x="4" data-y="8" data-a="37"></div>
      <div  data-x="5" data-y="8" data-a="47"></div>
      <div  data-x="1" data-y="7" data-a="6"></div>
      <div  data-x="2" data-y="7" data-a="16"></div>
      <div  data-x="3" data-y="7" data-a="26"></div>
      <div  data-x="4" data-y="7" data-a="36"></div>
      <div  data-x="5" data-y="7" data-a="46"></div>
      <div  data-x="1" data-y="6" data-a="5"></div>
      <div  data-x="2" data-y="6" data-a="15"></div>
      <div  data-x="3" data-y="6" data-a="25"></div>
      <div  data-x="4" data-y="6" data-a="35"></div>
      <div  data-x="5" data-y="6" data-a="45"></div>
      <div  data-x="1" data-y="5" data-a="4"></div>
      <div  data-x="2" data-y="5" data-a="14"></div>
      <div  data-x="3" data-y="5" data-a="24"></div>
      <div  data-x="4" data-y="5" data-a="34"></div>
      <div  data-x="5" data-y="5" data-a="44"></div>
      <div  data-x="1" data-y="4" data-a="3"></div>
      <div  data-x="2" data-y="4" data-a="13"></div>
      <div  data-x="3" data-y="4" data-a="23"></div>
      <div  data-x="4" data-y="4" data-a="33"></div>
      <div  data-x="5" data-y="4" data-a="43"></div>
      <div  data-x="1" data-y="3" data-a="2"></div>
      <div  data-x="2" data-y="3" data-a="12"></div>
      <div  data-x="3" data-y="3" data-a="22"></div>
      <div  data-x="4" data-y="3" data-a="32"></div>
      <div  data-x="5" data-y="3" data-a="42"></div>
      <div  data-x="1" data-y="2" data-a="1"></div>
      <div  data-x="2" data-y="2" data-a="11"></div>
      <div  data-x="3" data-y="2" data-a="21"></div>
      <div  data-x="4" data-y="2" data-a="31"></div>
      <div  data-x="5" data-y="2" data-a="41"></div>
    </div>
  </section>
</div>

In each of these squares, I will want to embed an item icon. I want to make some elements take up 2 and 3 grids vertically. You can see it, for example, on 1 square there is a sword which should take 2 squares. Just like in the attached picture. How to make it make sense?

CodePudding user response：

I added this to your CSS

.modulo {
  position: relative;
}

.modulo img {
  /* since the modulo have */
  height: var(--modulo-height);
  /* the image now follow the parent box*/
  position: absolute;
  /* will center the image, in the middle of 2 the boxes */
  top: calc(var(--modulo-height) / 2); /* you change also to 50%, if is 50px also the image, otherwise use the calc if the image is larger or smaller */
  z-index: 1;
}

here the complete, fixed code:

* {
  --modulo-height: 50px;
}

.box5x9 {
  width: 300px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background-color: #15110F;
  padding-top: 20px;
  padding-bottom: 20px;
  margin: 0 auto;
}

.modulo,
.modEsp {
  background: #121110;
  cursor: pointer;
  color: #FFF;
  font-size: 0.7em;
  text-align: center;
  width: var(--modulo-height);
  height: var(--modulo-height);
  margin: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 2px solid #342F28;
}

.modulo,
.marca,
.desmarca {
  -webkit-transition: 500ms;
  -moz-transition: 500ms;
  -o-transition: 500ms;
  transition: 500ms;
}

.modulo:hover,
.marca:hover,
.desmarca:hover {
  background: #5555554b !important;
}

.modulo {
  position: relative;
}

.modulo img {
  /* since the modulo have */
  height: var(--modulo-height);
  /* the image now follow the parent box*/
  position: absolute;
  /* will center the image, in the middle of 2 the boxes */
  top: calc(var(--modulo-height) / 2);
  /* you change also to 50%, if is 50px also the image, otherwise use the calc if the image is larger or smaller */
  z-index: 1;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document
  </title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div >
    <section >
      <div >
        <div  data-x="1" data-y="10" data-a="9">
          <img src="https://pl-wiki.metin2.gameforge.com/images/7/7d/Ostrze_Z_Czerwonej_Stali.png">
        </div>
        <div  data-x="2" data-y="10" data-a="19">
          <img src="https://pl-wiki.metin2.gameforge.com/images/0/0b/Czer._Kaptur_z_Pom.+.png?">
        </div>
        <div  data-x="3" data-y="10" data-a="29">
          <img src="https://pl-wiki.metin2.gameforge.com/images/0/0b/Czer._Kaptur_z_Pom.+.png">
        </div>
        <div  data-x="4" data-y="10" data-a="39">
          <img src="https://pl-wiki.metin2.gameforge.com/images/0/0b/Czer._Kaptur_z_Pom.+.png">
        </div>
        <div  data-x="5" data-y="10" data-a="49">
          <img src="https://pl-wiki.metin2.gameforge.com/images/7/7d/Ostrze_Z_Czerwonej_Stali.png">
        </div>
        <div  data-x="1" data-y="9" data-a="8">
        </div>
        <div  data-x="2" data-y="9" data-a="18">
        </div>
        <div  data-x="3" data-y="9" data-a="28">
        </div>
        <div  data-x="4" data-y="9" data-a="38">
        </div>
        <div  data-x="5" data-y="9" data-a="48">
        </div>
        <div  data-x="1" data-y="8" data-a="7">
        </div>
        <div  data-x="2" data-y="8" data-a="17">
        </div>
        <div  data-x="3" data-y="8" data-a="27">
        </div>
        <div  data-x="4" data-y="8" data-a="37">
        </div>
        <div  data-x="5" data-y="8" data-a="47">
        </div>
        <div  data-x="1" data-y="7" data-a="6">
        </div>
        <div  data-x="2" data-y="7" data-a="16">
        </div>
        <div  data-x="3" data-y="7" data-a="26">
        </div>
        <div  data-x="4" data-y="7" data-a="36">
        </div>
        <div  data-x="5" data-y="7" data-a="46">
        </div>
        <div  data-x="1" data-y="6" data-a="5">
        </div>
        <div  data-x="2" data-y="6" data-a="15">
        </div>
        <div  data-x="3" data-y="6" data-a="25">
        </div>
        <div  data-x="4" data-y="6" data-a="35">
        </div>
        <div  data-x="5" data-y="6" data-a="45">
        </div>
        <div  data-x="1" data-y="5" data-a="4">
        </div>
        <div  data-x="2" data-y="5" data-a="14">
        </div>
        <div  data-x="3" data-y="5" data-a="24">
        </div>
        <div  data-x="4" data-y="5" data-a="34">
        </div>
        <div  data-x="5" data-y="5" data-a="44">
        </div>
        <div  data-x="1" data-y="4" data-a="3">
        </div>
        <div  data-x="2" data-y="4" data-a="13">
        </div>
        <div  data-x="3" data-y="4" data-a="23">
        </div>
        <div  data-x="4" data-y="4" data-a="33">
        </div>
        <div  data-x="5" data-y="4" data-a="43">
        </div>
        <div  data-x="1" data-y="3" data-a="2">
        </div>
        <div  data-x="2" data-y="3" data-a="12">
        </div>
        <div  data-x="3" data-y="3" data-a="22">
        </div>
        <div  data-x="4" data-y="3" data-a="32">
        </div>
        <div  data-x="5" data-y="3" data-a="42">
        </div>
        <div  data-x="1" data-y="2" data-a="1">
        </div>
        <div  data-x="2" data-y="2" data-a="11">
        </div>
        <div  data-x="3" data-y="2" data-a="21">
        </div>
        <div  data-x="4" data-y="2" data-a="31">
        </div>
        <div  data-x="5" data-y="2" data-a="41">
        </div>
      </div>
    </section>
  </div>
</body>

</html>

CodePudding user response：

If you switch to grid instead of flex for the main container you will gain better control of sizing (grid is 2 dimensional, flex is 1).

You can set the grid to be 5x9 and make sure each cell is square by using aspect-ratio.

Then if you give every sword element a class sword, etc you can tell the system how many columns or rows each type of item is to take up. The default is 1 in both directions so you don't have to specify that.

.box5x9 {
  width: 300px;
  aspect-ratio: 5 / 9;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(9, 1fr);
  justify-content: center;
  background-color: #15110F;
  padding-top: 20px;
  padding-bottom: 20px;
  margin: 0 auto;
}

.modulo,
.modEsp {
  background: #121110;
  cursor: pointer;
  color: #FFF;
  font-size: 0.7em;
  text-align: center;
  margin: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 2px solid #342F28;
}

.modulo,
.marca,
.desmarca {
  -webkit-transition: 500ms;
  -moz-transition: 500ms;
  -o-transition: 500ms;
  transition: 500ms;
}

.modulo:hover,
.marca:hover,
.desmarca:hover {
  background: #5555554b !important;
}

.sword {
  grid-row: span 2;
}

<div >
  <section >
    <div >
      <div  data-x="1" data-y="10" data-a="9"><img src="https://pl-wiki.metin2.gameforge.com/images/7/7d/Ostrze_Z_Czerwonej_Stali.png"></div>
      <div  data-x="2" data-y="10" data-a="19"><img src="https://pl-wiki.metin2.gameforge.com/images/0/0b/Czer._Kaptur_z_Pom.+.png?"></div>
      <div  data-x="3" data-y="10" data-a="29"><img src="https://pl-wiki.metin2.gameforge.com/images/0/0b/Czer._Kaptur_z_Pom.+.png"></div>
      <div  data-x="4" data-y="10" data-a="39"><img src="https://pl-wiki.metin2.gameforge.com/images/0/0b/Czer._Kaptur_z_Pom.+.png"></div>
      <div  data-x="5" data-y="10" data-a="49"><img src="https://pl-wiki.metin2.gameforge.com/images/7/7d/Ostrze_Z_Czerwonej_Stali.png"></div>
      <div  data-x="1" data-y="9" data-a="8"></div>
      <div  data-x="2" data-y="9" data-a="18"></div>
      <div  data-x="3" data-y="9" data-a="28"></div>
      <div  data-x="4" data-y="9" data-a="38"></div>
      <div  data-x="5" data-y="9" data-a="48"></div>
      <div  data-x="1" data-y="8" data-a="7"></div>
      <div  data-x="2" data-y="8" data-a="17"></div>
      <div  data-x="3" data-y="8" data-a="27"></div>
      <div  data-x="4" data-y="8" data-a="37"></div>
      <div  data-x="5" data-y="8" data-a="47"></div>
      <div  data-x="1" data-y="7" data-a="6"></div>
      <div  data-x="2" data-y="7" data-a="16"></div>
      <div  data-x="3" data-y="7" data-a="26"></div>
      <div  data-x="4" data-y="7" data-a="36"></div>
      <div  data-x="5" data-y="7" data-a="46"></div>
      <div  data-x="1" data-y="6" data-a="5"></div>
      <div  data-x="2" data-y="6" data-a="15"></div>
      <div  data-x="3" data-y="6" data-a="25"></div>
      <div  data-x="4" data-y="6" data-a="35"></div>
      <div  data-x="5" data-y="6" data-a="45"></div>
      <div  data-x="1" data-y="5" data-a="4"></div>
      <div  data-x="2" data-y="5" data-a="14"></div>
      <div  data-x="3" data-y="5" data-a="24"></div>
      <div  data-x="4" data-y="5" data-a="34"></div>
      <div  data-x="5" data-y="5" data-a="44"></div>
      <div  data-x="1" data-y="4" data-a="3"></div>
      <div  data-x="2" data-y="4" data-a="13"></div>
      <div  data-x="3" data-y="4" data-a="23"></div>
      <div  data-x="4" data-y="4" data-a="33"></div>
      <div  data-x="5" data-y="4" data-a="43"></div>
      <div  data-x="1" data-y="3" data-a="2"></div>
      <div  data-x="2" data-y="3" data-a="12"></div>
      <div  data-x="3" data-y="3" data-a="22"></div>
      <div  data-x="4" data-y="3" data-a="32"></div>
      <div  data-x="5" data-y="3" data-a="42"></div>
      <div  data-x="1" data-y="2" data-a="1"></div>
      <div  data-x="2" data-y="2" data-a="11"></div>
      <div  data-x="3" data-y="2" data-a="21"></div>
      <div  data-x="4" data-y="2" data-a="31"></div>
      <div  data-x="5" data-y="2" data-a="41"></div>
    </div>
  </section>
</div>

You will have to consider how you want the other items to display - grid will fill up as it finds a free space if it can. To have even more control you could look into grid-template-areas which will allow you to name areas and map out the whole grid precisely.