-1

I am trying to show div one by one horizontally. I have tried using display: grid, but not working properly. Getting some space between div. I do not know why that space is coming between the div. How to resolve this issue using CSS.

Getting like this: image

Expecting like this image

   

 .box {
      position: relative;
      padding: 13px;
      background-color: #ccc;
      border-radius: 9px;
      height: 100%;
      min-height: 25px;
    }
    
    .title-message {
      font-size: 16px;
    }
    .grid-container-element {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 0px;
      border: 1px solid black;
      min-width: 97.5px;
      height: 32px;
      margin-left: 12px;
      float: left;
    }

    .grid-child-element-1 {
      margin: 3px 1px 1px 1px;
      border: 1px solid red;
      height: 24px;
      font-size: 7px;
      width: 23.4px;
      float: left;
    }

    .grid-child-element-2 {
      margin: 3px 1px 1px 1px;
      border: 1px solid red;
      height: 24px;
      font-size: 7px;
      min-width: 64.35px;
      float: left;
    }

    .text {
      font-size: 7px;
      margin: 0px;
      word-wrap: break-word;
      min-width: 23.4px;
    }

    .num {
      font-size: 7px;
      margin-top: 7px;
    }
<div class="box">
<p class="title-message">Content</p>
<div class="grid-container-element">
  <div class="grid-child-element-1">Grid</div>
  <div class="grid-child-element-2">
    <div class="text">Text 1 Text 1Text 1Text 1Text 1Text 1Text 1Text 1Text 1Text 1Text 1Text 1Text 1Text 1</div>
    <div class="num">1234</div>
  </div>
</div>
</div>

Demo: https://stackblitz.com/edit/angular-ivy-1qfku2?file=src%2Fapp%2Fapp.component.css,src%2Fapp%2Fapp.component.html

Pakal Nilavu
  • 3
  • 3
  • 1
    you can use display: flex to show all the div horizontally check this example you will get good idea from this: https://www.w3schools.com/css/css3_flexbox.asp – Haseeb hanif Aug 30 '23 at 07:54
  • 1
    If you want to work with grid (or flexbox), then there certainly should be no `float` set on any of those elements. – CBroe Aug 30 '23 at 07:56
  • Does this answer your question? [How can I horizontally center an element?](https://stackoverflow.com/questions/114543/how-can-i-horizontally-center-an-element) – André Aug 30 '23 at 08:29

1 Answers1

0

Try adjusting your columns to auto and 1fr.

.grid-container-element {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0px;
  border: 1px solid black;
  min-width: 97.5px;
  height: 32px;
  margin-left: 12px;
  float: left;
}

.grid-child-element-1 {
  margin: 3px 1px 1px 1px;
  border: 1px solid red;
  height: 24px;
  font-size: 7px;
  width: 23.4px;
  float: left;
}

.grid-child-element-2 {
  margin: 3px 1px 1px 1px;
  border: 1px solid red;
  height: 24px;
  font-size: 7px;
  min-width: 64.35px;
  float: left;
}

.text {
  font-size: 7px;
  margin: 0px;
  word-wrap: break-word;
  min-width: 23.4px;
}

.num {
  font-size: 7px;
  margin-top: 7px;
}
<div class="grid-container-element">
  <div class="grid-child-element-1">Grid</div>
  <div class="grid-child-element-2">
    <div class="text">Text 1 Text 1Text 1Text 1Text 1Text 1Text 1Text 1Text 1Text 1Text 1Text 1Text 1Text 1</div>
    <div class="num">1234</div>
  </div>
</div>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161