Search code examples
javascriptcsscss-grid

Elements left and right from parent

Is there a way of evenly distributing elements as you add them left and right from parent, with the parent in the middle?

example

Solution

  • Is this solving your problem (using grid) ?

    #container{
  display:grid;
  grid-template-columns:repeat(3, auto);
  
  border:solid 1px black;
}
#root{
grid-column:2;
grid-row:1/1000; /* If you know the number of element you can replace 1000 by nbElement/2 */

background-color: red;
}

.element{
background-color:grey;
}
    <div id='container'>
  <div id='root'>Root</div>
  <div class='element'>Element</div>
  <div class='element'>Element</div>
  <div class='element'>Element</div>
  <div class='element'>Element</div>
  <div class='element'>Element</div>
  <div class='element'>Element</div>
  <div class='element'>Element</div>
</div>