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

Css – How can to put buttons one below another one instead of having a row of buttons in a grid?

I’m trying to put two or more buttons in a column, I tried inline, inline-block, block, but none worked. I need one button at the top and the others below, not in a row, not in the first line.

<!DOCTYPE html>
<html>

<head>
  <style>
    .item1 {
      grid-area: header;
    }
    
    .item2 {
      grid-area: menu;
    }
    
    .item3 {
      grid-area: main;
    }
    
    .item4 {
      grid-area: right;
    }
    
    .item5 {
      grid-area: footer;
    }
    
    .grid-container {
      display: grid;
      grid-template-areas: 'header header header header header header' 'menu main main main right right' 'menu footer footer footer footer footer';
      gap: 10px;
      background-color: #2196F3;
      padding: 10px;
    }
    
    .grid-container>div {
      background-color: rgba(255, 255, 255, 0.8);
      text-align: center;
      padding: 20px 0;
      font-size: 30px;
    }
    
    .item2 {
      display: block;
    }
  </style>
</head>

<body>

  <h1>Grid Layout</h1>

  <div class="grid-container">
    <div class="item1">Title</div>
    <div class="item2">
      <button>Hello</button>
      <button>Bye-Bye</button>
    </div>
    <div class="item3">Main</div>
    <div class="item4">Right</div>
    <div class="item5">Footer</div>
  </div>

</body>

</html>

I try how to do this and I failing. Maybe you can help me with this. Stackexchange is telling me that most of my question is code and I don’t know how to fix it.

Tags:

2

Answers


  1. 0

    According to code provided above, to get the required result of putting buttons vertically, the CSS rule "display: block" should be applied to them as follows:

    .item2 button {
  display: block;
}
    Login or Signup to reply.
  2. 0

    You can put two or more buttons in a column using CSS to use the flex property. The flex property is a shorthand for flex-grow, flex-shrink, and flex-basis, which control how the items grow, shrink, and take up space in a flex container. By setting the flex property to 1 0 auto, you can make the buttons take up the available space in the column and wrap to the next line if needed.

    To use the flex property, you need to make the parent element a flex container by setting its display property to flex. You also need to set its flex-direction property to column to make the items stack vertically. You can also use the align-items property to center the items horizontally.

    <!DOCTYPE html>
<html>

<head>
  <style>
    .item1 {
      grid-area: header;
    }
    
    .item2 {
      grid-area: menu;
    }
    
    .item3 {
      grid-area: main;
    }
    
    .item4 {
      grid-area: right;
    }
    
    .item5 {
      grid-area: footer;
    }
    
    .grid-container {
      display: grid;
      grid-template-areas: 'header header header header header header' 'menu main main main right right' 'menu footer footer footer footer footer';
      gap: 10px;
      background-color: #2196F3;
      padding: 10px;
    }
    
    .grid-container>div {
      background-color: rgba(255, 255, 255, 0.8);
      text-align: center;
      padding: 20px 0;
      font-size: 30px;
    }
    
    .item2 {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .item2 button {
      flex: 1 0 auto;
      margin: 5px;
    }
  </style>
</head>

<body>

  <h1>Grid Layout</h1>

  <div class="grid-container">
    <div class="item1">Title</div>
    <div class="item2">
      <button>Hello</button>
      <button>Bye-Bye</button>
    </div>
    <div class="item3">Main</div>
    <div class="item4">Right</div>
    <div class="item5">Footer</div>
  </div>

</body>

</html>

    PS::

    The flex: 5 5 auto property means:

    • The flex-grow value is 5, which means the flex item will grow five times faster than other flex items with lower flex-grow values when there is extra space in the flex container.
    • The flex-shrink value is 5, which means the flex item will shrink five times faster than other flex items with lower flex-shrink values when there is not enough space in the flex container.
    • The flex-basis value is auto, which means the flex item will use its width (in horizontal writing mode) or height (in vertical writing mode) as the preferred size unless it has a content value.

    Here is a sample code snippet that illustrates the effect of flex: 5 5 auto:

    <!DOCTYPE html>
    <html>

    <head>
      <style>
/* The flex container has a fixed width and height */
.container {
display: flex;
width: 400px;
height: 200px;
border: 1px solid black;
}

/* The first flex item has flex: 5 5 auto */
.item1 {
flex: 5 5 auto;
background-color: lightblue;
}

/* The second flex item has flex: 1 1 auto */
.item2 {
flex: 1 1 auto;
background-color: lightgreen;
}
</style></head>
<body>
<div class="container">
<div class="item1">This is the first flex item </div>
<div class="item2">This is the second flex item</div>
</div>
</body>
</html>

    As you can see, the first flex item takes up more space than the second flex item, because it has a higher flex-grow value. If you resize the browser window, you will also notice that the first flex item shrinks more than the second flex item, because it has a higher flex-shrink value.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search