Kevin Powell - Community•5mo ago

How to split a div into even sections?

I have these sections defined in my main element that's set as a grid. I want to be able to split the sections into columns that I can assign individual images to. For instance as shown in the second image. The other two sections would be handled the same way. Since there's only 3 items in the first section, I'd like it to be split into 3 columns, but in the other two sections where there's 8 items, I'd like it to be split into 2 rows of 4 columns. Is this something that'd be easy to achieve with flexbox? I can provide code if needed.

26 Replies

BolvarsdadOP•5mo ago

Each of those panels are section tags inside of a main element grid

lko•5mo ago

Use grid

BolvarsdadOP•5mo ago

I guess that might be better oh subgrid is a thing

lko•5mo ago

it is but you dont need this here

BolvarsdadOP•5mo ago

      <section class="classguides_container grid_col_span_3 bg_secondary">
        <div class="guides bg_primary_accent">Fury</div>
        <div class="guides">Arms</div>
        <div class="guides">Prot</div>
      </section>

      <section class="classguides_container grid_col_span_3 bg_secondary">
        <div class="guides bg_primary_accent">Fury</div>
        <div class="guides">Arms</div>
        <div class="guides">Prot</div>
      </section>

.classguides_container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    place-items: center;
}

.classguides_container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    place-items: center;
}

BolvarsdadOP•5mo ago

How would I go about making them take up a third of the space? Also if it helps All of those section tags are inside of <main class="main_container">

.main_container {
    display: grid;
    gap: 1.5rem;
    width: min(60vw, 70rem);

    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr .3fr .5fr .5fr .5fr;

    margin-left: auto;
    margin-right: auto;
    margin-top: 1.5rem;

    font-family: var(--ff_secondary);
    font-size: var(--fs_400);
    font-weight: var(--fw_700);
}

.main_container {
    display: grid;
    gap: 1.5rem;
    width: min(60vw, 70rem);

    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr .3fr .5fr .5fr .5fr;

    margin-left: auto;
    margin-right: auto;
    margin-top: 1.5rem;

    font-family: var(--ff_secondary);
    font-size: var(--fs_400);
    font-weight: var(--fw_700);
}

lko•5mo ago

This is what you want to achive right?

BolvarsdadOP•5mo ago

the first panel has all of the items in the right place, I just need them to take up a third of it each

BolvarsdadOP•5mo ago

grid seems correctly set up

BolvarsdadOP•5mo ago

Actually I guess it makes sense that only the text part is getting lit up since there's only really a <p> tag there

lko•5mo ago

<section>
  <div class="grid">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="grid-4">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
   <div class="grid-4">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</section>

<section>
  <div class="grid">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="grid-4">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
   <div class="grid-4">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</section>

* {
  box-sizing: border-box;
}
section {
  display: grid;
  gap: 10rem;
}
.item {
  width: 100%;
  height: 100%;
  background-color: blue;
  padding: 2rem;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

* {
  box-sizing: border-box;
}
section {
  display: grid;
  gap: 10rem;
}
.item {
  width: 100%;
  height: 100%;
  background-color: blue;
  padding: 2rem;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

BolvarsdadOP•5mo ago

awesome, thank you so much really readable as well

lko•5mo ago

BolvarsdadOP•5mo ago

okay it's the place-items: center that's messing it up

BolvarsdadOP•5mo ago

I want to centralize the text

lko•5mo ago

Why does it say that the grid only has 1 column?

BolvarsdadOP•5mo ago

:peepoShrug:

lko•5mo ago

Check your devtools

BolvarsdadOP•5mo ago

if I enable div.grid it shows all

lko•5mo ago

and where are you placing place-items: center?

BolvarsdadOP•5mo ago

.classguides_container,
.bossguides_container,
.dungeonguides_container {
    display: grid;
}

.classguides_container,
.bossguides_container,
.dungeonguides_container {
    display: grid;
}

      <section class="classguides_container grid_col_span_3 bg_secondary">
        <div class="grid">
          <div class="item">Fury</div>
          <div class="item">Arms</div>
          <div class="item">Protection</div>
        </div>
      </section>
      <section class="bossguides_container grid_col_span_3 bg_secondary">
        <div class="grid-4">
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
        </div>
      </section>
      <section class="dungeonguides_container grid_col_span_3 bg_secondary">
        <div class="grid-4">
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
        </div>
      </section>

      <section class="classguides_container grid_col_span_3 bg_secondary">
        <div class="grid">
          <div class="item">Fury</div>
          <div class="item">Arms</div>
          <div class="item">Protection</div>
        </div>
      </section>
      <section class="bossguides_container grid_col_span_3 bg_secondary">
        <div class="grid-4">
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
        </div>
      </section>
      <section class="dungeonguides_container grid_col_span_3 bg_secondary">
        <div class="grid-4">
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
        </div>
      </section>

need to have them as different sections

lko•5mo ago

why also you didnt asnwer my question

BolvarsdadOP•5mo ago

my bad

.classguides_container,
.bossguides_container,
.dungeonguides_container {
    display: grid;
    place-items: center;
}

.classguides_container,
.bossguides_container,
.dungeonguides_container {
    display: grid;
    place-items: center;
}

and about needing separate sections was my brain not braining

Gaming

Programming

How to split a div into even sections?