Landing page made using css grid

Community feedback

• 

  P

  solvman•1,650

  @solvmanPosted 10 months ago

  Hi @JanAbe,

  I did it using Flex. I made a small example for you:

  <div class="wrapper">
    <div class="box red"></div>
    <div class="box blue"></div>
    <div class="box orange"></div>
  </div>
  

  With the following styles applied:

  .red {
    background-color: red;
  }
  .blue {
    background-color: blue;
  }
  .orange {
    background-color: orange;
  }
  
  .wrapper {
    border: 1px solid red;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  
  .box {
    width: 75%;
    height: 150px;
  }
  
  .wrapper div:nth-child(1) {
    align-self: flex-start;
  }
  
  .wrapper div:nth-child(2) {
    align-self: center;
  }
  
  .wrapper div:nth-child(3) {
    align-self: flex-end;
  }
  

  There is a link to the code pen solution if you want to check it out: Flex container. Also, feel free to check how I did it in my project: My Solution

  Otherwise, it is an exceptionally well-done project!🎉 Congratulation! 👏 I hope you find my comments useful 🫶

  Marked as helpful

  1

  ---

  

  JanAbe•230

  @JanAbePosted 10 months ago

  @solvman

  Ty so much for your time. I think I understand it now! The width of 75% is also important which I didn't use.

  1

  

  P

  solvman•1,650

  @solvmanPosted 10 months ago

  @JanAbe

  Yes, that 70% ensures that all three are the same size.

  It is similar to the Grid; I must use justify-self instead of align. I played around with it. If you are interested, you might want to check out Grid container

  Marked as helpful

  1