Similar to using `display:flex` and `justify-content: center`, you can achieve centered

Question

Similar to using `display:flex` and `justify-content: center`, you can achieve centered

I have a group of n children within a div. I want to arrange them in a single row and center them horizontally.

If I were to use flexbox, I could achieve this by:

display: flex;
justify-content: center;

Is there a way to accomplish the same layout using grid instead of flexbox?

.a {
  height: 20px;
  width: 20px;
  background: blue;
  border: 1px solid red;
}

.b {
  display: grid;
  gap: 20px;
}

<div class="b">
  <div class="a">x</div>
  <div class="a">x</div>
  <div class="a">x</div>
  <div class="a">x</div>
</div>

css flexbox grid-layout

Answer 1

Answer №1

Here are all the elements aligned in a single row, perfectly centered:

.box {
  height: 20px;
  width: 20px;
  background: blue;
  border: 1px solid red;
}

.container {
  display: grid;
  justify-items: center;
  gap: 20px;
  grid-auto-columns: 1fr;
  grid-auto-flow:column;
}

<div class="container">
  <div class="box">x</div>
  <div class="box">x</div>
  <div class="box">x</div>
  <div class="box">x</div>
</div>

Update: You can utilize a 'wrapper' element to centralize the grid.

.box {
  height: 20px;
  width: 20px;
  background: blue;
  border: 1px solid red;
}

.container {
  display: inline-grid;
  justify-items: center;
  gap: 20px;
  grid-auto-columns: max-content;
  grid-auto-flow: column;
}
.wrapper {
  text-align: center;
}

<div class="wrapper">
  <div class="container">
    <div class="box">x</div>
    <div class="box">x</div>
    <div class="box">x</div>
    <div class="box">x</div>
  </div>
</div>

Answer 2

Here are all the elements aligned in a single row, perfectly centered:

.box {
  height: 20px;
  width: 20px;
  background: blue;
  border: 1px solid red;
}

.container {
  display: grid;
  justify-items: center;
  gap: 20px;
  grid-auto-columns: 1fr;
  grid-auto-flow:column;
}

<div class="container">
  <div class="box">x</div>
  <div class="box">x</div>
  <div class="box">x</div>
  <div class="box">x</div>
</div>

Update: You can utilize a 'wrapper' element to centralize the grid.

.box {
  height: 20px;
  width: 20px;
  background: blue;
  border: 1px solid red;
}

.container {
  display: inline-grid;
  justify-items: center;
  gap: 20px;
  grid-auto-columns: max-content;
  grid-auto-flow: column;
}
.wrapper {
  text-align: center;
}

<div class="wrapper">
  <div class="container">
    <div class="box">x</div>
    <div class="box">x</div>
    <div class="box">x</div>
    <div class="box">x</div>
  </div>
</div>

Similar to using `display:flex` and `justify-content: center`, you can achieve centered

Answer №1

Similar questions

Ensure that text within openhtmltopdf is aligned to the right and any unnecessary white space at the

Using a JavaScript class rather than an ID for toggling visibility

What is the method for creating a curved CSS Pseudo element background?

How can we add styles to text entered into a form input field in a targeted way?

Is there a way to effectively rotate an image according to the position of my cursor, ensuring it functions correctly?

The MUI Modal is too large for the display

Challenges with formatting the <legend> tag and grid setup in bootstrap 4

A universal setting takes precedence over Vuetify divider colors

Decrease the heaviness of a Glyphicon

Animating background color change with scroll in React using fade effect

Connect the CSS file in React index.html to the Flask backend

Show a specific portion of an extremely large .svg image file using Angular.js directive with the help of javascript or css

The dynamic addition of the active class is malfunctioning

Is it possible for Skycons to show a duplicate icon?

Ways to quickly change a class when clicking (without waiting for mouse button release)

Drop-down selection triggering horizontal auto-scroll

How can I adjust the appearance of an HTML tag within an Angular component?

What is the process for inspecting the element within a div using jsname with JS?

Positioning parent and child elements using CSS

The issue of duplicate CSS arising during the compilation of SASS into a single CSS file with G