Question 421943 in Html Question posted in
Some basic documentation can be found here.

Html – How can I center elements in the last row in a grid (CSS, JSX)?

Each row can have a max of 4 elements, but if it has less (1, 2, 3) those elements should be centered. And if there are only 1,2, or 3 elements, those should be centered too. The justify-content doesn’t seem to be working and I’ve also tried using justify-items as well.

Clarification: the ‘.tech-used’ tag is just for a parent element, but I didn’t include it in the JSX code snippet.

<div className="tech-grid">
   {project.skills.map((skill, index) => (
       <div className="tech-item" key={index}>
          <img src={skill.logo} alt={`${skill.name} logo`} className="skill-logo"/>
          <p>{skill.name}</p>
        </div>
    ))}
</div>

.tech-used{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}


    .tech-grid{
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 30px;
        justify-content: center;
    }

    .tech-item{
        display: flex;[![enter image description here][1]][1]
        flex-direction: column;
        align-items: center;
    }
Tags:

2

Answers


  1. 0

    Each row can have a max of 4 elements, but if it has less (1, 2, 3) those elements should be centered. And if there are only 1,2, or 3 elements, those should be centered too.

    Given these defined parameters you can leverage nth-child():nth-last-child() to manage the position of the 1st element.

    Note that this requires a 16 column grid with each child spanning 4 columns.

    .grid {
  max-width: 500px;
  outline: 1px solid grey;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: .5em;
  margin-bottom: 1em;
}

.item {
  height: 50px;
  background: lightblue;
  display: grid;
  place-items: center;
  grid-column: span 4;
}

.item:nth-child(1):nth-last-child(3) {
  grid-column: 3 / span 4
}

.item:nth-child(1):nth-last-child(2) {
  grid-column: 5 / span 4
}

.item:nth-child(1):nth-last-child(1) {
  grid-column: 7 / span 4
}
    <div class="grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

<div class="grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<div class="grid">
  <div class="item">1</div>
  <div class="item">2</div>
</div>

<div class="grid">
  <div class="item">1</div>
</div>
    Login or Signup to reply.
  2. 0

    For this problem, a flexbox which wraps is a better solution than a grid. The key is to specify the width of the child elements in order to get the desired number of columns.

    width: calc(100% / var(--columns) - (var(--gap) * (var(--columns) - 1) / var(--columns)));

    The calculation above uses a couple of global variables:

    :root {
  --columns: 4;
  --gap: 1em;
}

    It divides the width of the parent (100%) by the number of columns (4 in this case), then subtracts the gap. However, because there is one fewer gap than the number of columns, we don’t need to subtract the entire gap, only this fraction of it …

    enter image description here

    … where 𝑥 is the number of columns. So in this case the fraction is ¾.

    :root {
  --columns: 4;
  --gap: 1em;
}

body {
  margin: 2em 1em;
  background: black;
  font-family: sans-serif;
  font-weight: bold;
}

.d1 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  justify-content: center;
  background: yellow;
  margin-bottom: 2em;
}

.d1 > * {
  width: calc(100% / var(--columns) - (var(--gap) * (var(--columns) - 1) / var(--columns)));
  background: orange;
  color: white;
  display: flex;
  justify-content: center;
  padding: 1em;
  box-sizing: border-box;
}
    <div class="d1">
  <div>1</div>
</div>

<div class="d1">
  <div>1</div>
  <div>2</div>
</div>

<div class="d1">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="d1">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

<div class="d1">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="d1">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

<div class="d1">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search