Why display grid with 100% in grid-template-columns goes out of body?

by

The issue isn’t with width:100% like you think. It is with grid-template that you made 40% 60% and you also have a grid-gap of 5px which will make the total more than 100%.

Instead rely on the fr unit to split the free space considering the gap:

.parent {
  position:fixed;
  width:100%;
  left:0;
  top:14px;
  display:grid;
  grid-template-columns:4fr 6fr;
  grid-gap:5px;
  background:#eee;
}
.left {
  border:2px solid red;
}
.right {
  border:2px solid red;
}
<div class="parent">
  <div class="left">LEFT</div>
  <div class="right">RIGHT</div>
</div>

More Related Contents:

  1. CSS-only masonry layout
  2. Centering in CSS Grid
  3. Last margin / padding collapsing in flexbox / grid layout
  4. Make grid container fill columns not rows
  5. CSS Grid Layout not working in IE11 even with prefixes
  6. Equal width flex items even after they wrap
  7. How to center elements on the last row in CSS Grid?
  8. Grid properties not working on elements inside grid container
  9. CSS grid square layout [duplicate]
  10. How to target a specific column or row in CSS Grid Layout?
  11. minmax() defaulting to max
  12. Why is my Grid element’s height not being calculated correctly?
  13. CSS grid – maximum number of columns without media queries
  14. Make row stretch across all columns in CSS Grid
  15. Make flex items overlap
  16. CSS only solution to set MULTIPLE “same height” row sections on a responsive grid
  17. Understanding grid negative values
  18. grid-auto-flow in snake lines?
  19. Equal width columns in CSS Grid
  20. CSS grid wrapping
  21. How can I target a specific column or row in a CSS grid layout?
  22. How to make CSS Grid items take up remaining space?
  23. sticky position on css grid items
  24. How do browsers calculate width when child depends on parent, and parent’s depends on child’s
  25. What are the default values for justify-content & align content?
  26. How to make a fixed column in CSS using CSS Grid Layout?
  27. CSS Grid with variable number of “auto” rows, but one row should take “1fr”
  28. pseudo-element acting like a grid item in CSS grid
  29. How to calc() the number of rows in a grid template?
  30. CSS Grid Row Height Safari Bug

Leave a Comment