css Question posted in
Some basic documentation can be found here.

Css – Flex 1st row 1 item, 2nd row 3 items

I’m trying to build out something with flex that has a layout like this…

  []
[][][]
[][][]

My breakpoints are fine when stacked (1 item per row), or 2 items per row by using

ul {
    flex-direction: row;
    flex-wrap: wrap;
}

li {
    flex: 0 0 48%;
}

li:first-of-type {
    flex: 0 1 50%;
}

But once I get to 3 per line the first item doesn’t seem to want to be by itself. I’m fine with having the flex code change with @media breaks, but I need to stay in flex as my last line needs to have any items below 3 centered aligned, not left aligned.

I’ve tried other combinations but have had no luck keeping the first line item the same size as the remaining row items.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Sorry for my late reply, I just got back to this project today. I ended up solving my own problem while trying to make an example on codepen.

    Hope this helps anyone else facing the same problem.

    (Displays all the profiles in a single column)

    ul { display: flex; flex-direction: column; justify-content: center; gap: 3rem 4% }

    (Displays the profiles in 2 columns but keeps the first profile on it's own row centered)

    @media screen and (min-width:450px) {
    ul { flex-direction: row; flex-wrap: wrap; }
    ul li { flex: 0 0 48%; }
    ul li:first-of-type { flex: 0 0 100%; }
    ul li:first-of-type .profile-img { width: 50%; margin: 0 auto 1.5rem auto; }
}

    768px + (Displays the profiles in 3 columns but keeps the first profile on it's own row and centered)

    @media screen and (min-width:768px) {
    ul li:first-of-type .profile-img { width: 30%; }
}

  2. 0

    One method is to use a grid and position the last/last-but-one items specifically.

    This snippet uses a 6 column grid, each item taking up two column widths.

    The first item always starts at column 3.

    7 grids are shown here, ranging from 1 item to 7.

    <style>
  .container {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
  }
  
  .container>div {
    width: 100%;
    height: 100px;
    background-color: var(--c);
    grid-column-end: span 2;
  }
  
  .container>div:first-child {
    grid-column-start: 3;
  }
  
  .container>div:nth-child(2) {
    grid-column-start: 1;
  }
  
  .container>div:nth-last-child(1):nth-child(3n) {
    grid-column-start: 4;
  }
  
  .container>div:nth-last-child(1):nth-child(3n+2) {
    grid-column-start: 3;
  }
  
  .container>div:nth-last-child(2):nth-child(3n+2) {
    grid-column-start: 2;
  }
  
  .container:nth-child(1) {
    --c: cyan;
  }
  
  .container:nth-child(2) {
    --c: magenta;
  }
  
  .container:nth-child(3) {
    --c: yellow;
  }
  
  .container:nth-child(4) {
    --c: black;
  }
  
  .container:nth-child(5) {
    --c: red;
  }
  
  .container:nth-child(6) {
    --c: green;
  }
  
  .container:nth-child(7) {
    --c: blue;
  }
</style>

<body>
  <div class="container">
    <div></div>
  </div>
  <div class="container">
    <div></div>
    <div></div>
  </div>
  <div class="container">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search