Question 43659 in Html Question posted in
Some basic documentation can be found here.

How to specify that the columns in a grid layout div should have a width equalling 100% of the parent of grid div – Html

I have a parent div that contains a another div with a grid layout. The grid layout will have 1 row and arbitrary many columns.

How to specify that the width of the columns must be equal to 100% of the parent width?

Tags:

2

Answers


  1. 0

    Use grid-auto-flow: column;grid-auto-columns: 100%;

    .container {
  display: grid;
  grid-auto-flow: column; /* column layout */
  grid-auto-columns: 100%; /* all columns equal to container width */
  border:2px solid red;
  height: 250px;
  overflow: auto;
}

.container div{
  border:2px solid blue;
}
    <div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>
    Login or Signup to reply.
  2. 0

    When you define the classes for your divs in your CSS file, if you specify a width that width will be, by default, in relation to the parent container.

    If you want to make sure, because some browsers may have different defaults, you can specify position: relative; in your definition.

    example

    .innerDiv {
   position: relative;
   width: 100%
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search