Сетка :: Правый элемент выравнивания сетки

Question

с помощью расположения сетки кнопок справа.Может кто-то указать мне верное направление?

.container {
  width: 500px;
  border: 1px solid red;
}

.grid {
  display: grid;
  grid-gap: 5px;
  grid-auto-flow: column;
  width: 100px;
}

<div class="container">
  <div class="grid">
    <button>test 1</button>
    <button>test 2</button>
  </div>
</div>

Как в приведенном выше сценарии как переместить две кнопки в конец родительского элемента div?

Answer 1

Надеюсь, это полезно для вас!

.container {
  width: 500px;
  border: 1px solid red;
}

.grid {
  display: grid;
  grid-gap: 5px;
  grid-auto-flow: column;
  width: 100px;
  margin: 0 0 0 auto; //added
}

<div class="container">
  <div class="grid">
    <button>test 1</button>
    <button>test 2</button>
  </div>
</div>

Answer 2

Проблема в том, что .. вы установили ширину сетки в 100px

Вместо этого установите столбец width:100px внутри сетки, потому что сетка - это контейнер, также используйте justify-content:end; для выравнивания содержимого по правой стороне..

.container {
  width: 500px;
  border: 1px solid red;
}

.grid {
  display: grid;
  grid-gap: 5px;
  grid-auto-flow: column;
  width: 100%;
  grid-template-columns: 100px 100px;
  justify-content: end;
}
 button{display:inline-block;}
 

<div class="container">
  <div class="grid">
    <button>test 1</button>
    <button>test 2</button>
  </div>
</div>

Ссылка: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout

Answer 3

использование justify-content: end; & grid-template-columns: 100px 100px;

.container {
  width: 500px;
  border: 1px solid red;
}

.grid {
  display: grid;
  grid-gap: 5px;
  grid-auto-flow: column;
  width: 100%;
  grid-template-columns: 100px 100px;
  justify-content: end;
}

<div class="container">
  <div class="grid">
    <button>test 1</button>
    <button>test 2</button>
  </div>
</div>