Question

0

345

Views

How to center CSS Grid but child elements at the start?

I want to implement this layout with CSS Grid or Flexbox. If necessary, it is also possible to use JS.

In the pictures you can see how the child elements should be arranged when adding 1, 2, 3 and 4 child elements in a sequence

The content is generated dynamically. TThat is, the number of child elements is unknown. There may be a maximum of 3 child elements in a row. The grid items should be centered. The whole Layout should also be responsive.

.parent {
  background-color: red;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  justify-content: center;
  /* 3* 350px width of child elements + 2*20px gap*/
  max-width: 1090px; 
  padding: 20px;
}

.child {
  width: 350px;
  height: 450px;
  background-color: blue;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

It is currently not responsive (if possible without media queries) and the child elements are not centered.

Do you know how I can implement this layout?

about 4 years ago · Santiago Trujillo

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-08-18T14:54:44.738Z

Don't define 3 columns but rely on implicit column creation:

.parent {
  background-color: red;
  display: grid;
  grid-auto-columns: calc((100% - 2*20px)/3); /* size of one column */
  grid-gap: 20px;
  justify-content: center;
  margin: 10px;
}

.child {
  height: 50px;
  background-color: blue;
}

/* place each item in the adequate column */
.child:nth-child(3n + 1) {grid-column: 1}
.child:nth-child(3n + 2) {grid-column: 2}
.child:nth-child(3n + 3) {grid-column: 3}

<div class="parent">
  <div class="child"></div>
</div>
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Answer 2 · 2022-08-18T14:54:44.744Z

I think I have something for this using implicit grids:

* {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  gap: 50px;
  background: #000;
}

section {
  width: 100%;
  padding: 30px;
  background: #666;
}

.grid-inner {
  display: grid;
  gap: 30px;
  justify-content: center;
  grid-auto-columns: calc(33% - 15px);
}

.box {
  padding: 30px;
  background: white;
  border: 1px solid black;
}

.box:nth-child(2) {
  grid-column: 2;
}

.box:nth-child(3) {
  grid-column: 3;
}

<section>
  <div class="grid-inner">
    <div class="box"></div>
  </div>
</section>

<section>
  <div class="grid-inner">
    <div class="box"></div>
    <div class="box"></div>
  </div>
</section>

<section>
  <div class="grid-inner">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</section>

<section>
  <div class="grid-inner">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</section>

<section>
  <div class="grid-inner">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</section>

0

345

How to center CSS Grid but child elements at the start?

2 answers

0

0

Find remote jobs

Andres GPT