Make Grid Items Fill Columns Not Rows

Make grid items fill columns not rows

Initially, the grid lays out items in a horizontal direction. This is because an initial setting of a grid container is grid-auto-flow: row.

That's what you're getting in your layout:

.grid {  display: grid;  grid-template-columns: 1fr 1fr 1fr;  grid-auto-flow: row; /* default setting; can be omitted */}

<div class="grid">  <div>1</div>  <div>2</div>  <div>3</div>  <div>4</div>  <div>5</div>  <div>6</div>  <div>7</div>  <div>8</div>  <div>9</div></div>

How to make columns into rows in css grid

You must display grid then when your @media screen hits its threshold it will begin to flex. You have to tell which rows you want to combine within your flexed column and how far to extend them. Hopefully this helps and makes sense. good luck!

.thegrid {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: 80px 200px;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

@media only screen and (max-width: 600px) {
  .thegrid {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: 80px 200px;
    gap: 10px;
    background-color: #2196F3;
    padding: 10px;
  }
  .row-1 {
    grid-column: 1/ span 2;
    grid-row: 1;
  }
  .row-2 {
    grid-row: 2;
  }
}

<div class="thegrid">
  <div class="row-1">
    content 1
  </div>
  <div class="row-2">
    content 2
  </div>
  <div class="row-2">
    content 3
  </div>
</div>

Make Grid Item Auto Fill

You can do it like below:

.container {
  display: inline-grid;
  margin:5px;
  vertical-align:top;
  width: 200px;
  height: 200px;
  grid-gap: 8px;
}

.a { background: red;}
.b { background: blue;}
.c { background: green;}

/* when 2 items we add another column*/
.container :nth-child(2):nth-last-child(1) {
  grid-column:2;
}
/* when 3 items we add another row as well */
.container :nth-child(3):nth-last-child(1) {
  grid-row:2;
  grid-column:2;
}
/* when 3 items, the first one will span 2 rows*/
.container :first-child:nth-last-child(3) {
  grid-row:span 2;
}

<div class="container">
  <div class="a"></div>
</div>

<div class="container">
  <div class="b"></div>
</div>

<div class="container">
  <div class="c"></div>
</div>

<div class="container">
  <div class="a"></div>
  <div class="b"></div>
</div>

<div class="container">
  <div class="b"></div>
  <div class="c"></div>
</div>

<div class="container">
  <div class="a"></div>
  <div class="c"></div>
</div>

<div class="container">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</div>

CSS Grid Items not filling cell

I didn't quite understand your problem, but I saw a different problem in your code. When you fill all the cells with large text, then your grid will go beyond the screen. Perhaps you meant this problem. You need to specify the overflow-wrap: anywhere rule for the .about-grid selector. Now the contents of the cells will depend on the width of the cells themselves.

To check how overflow-wrap: anywhere works. Run this snippet and remove the overflow-wrap: anywhere rule from the .about-grid selector and you should see what I'm talking about.

body {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.about-grid {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.2fr 1.5fr 1.2fr 0.8fr;
  grid-template-areas: "nav nav nav nav" "sidebar main main main" "sidebar content1 content2 content3" "sidebar footer footer footer";
  grid-gap: 0.2rem;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 12px;
  color: #004d40;
  text-align: center;
  overflow-wrap: anywhere; /*add this it*/
}

.about-grid nav {
  background: #a7ffeb;
  grid-area: nav;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

.about-grid main {
  background: #84ffff;
  grid-area: main;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

.about-grid #sidebar {
  background: #18ffff;
  grid-area: sidebar;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

.about-grid #content1 {
  background: #6fffd2;
  grid-area: content1;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

.about-grid #content2 {
  background: #64ffda;
  grid-area: content2;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

.about-grid #content3 {
  background: #73ffba;
  grid-area: content3;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

.about-grid footer {
  background: #1de9b6;
  grid-area: footer;
  border-radius: var(--main-radius);
  padding-top: var(--main-padding);
}

.about-grid a {
  text-align: center;
  display: block;
  font-family: inherit;
  text-decoration: none;
  font-weight: bold;
  margin: 1rem;
}

@media only screen and (max-width: 550px) {
  .about-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2fr 1.2fr 1.2fr 1fr;
    grid-template-areas: "nav" "sidebar" "main" "content1" "content2" "content3" "footer";
  }
}

<main class="about-bg">
  <div class="about-grid">
    <nav>Navbar</nav>
    <main>Main</main>
    <div id="sidebar">SidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebarSidebar</div>
    <div id="content1">Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1Content1</div>
    <div id="content2">Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2Content2</div>
    <div id="content3">Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3Content3</div>
    <footer>Footer</footer>
  </div>

</main>

Cannot fill available viewport and make columns to overflow within grid layout

I finally did it. I only needed to add these rules:

.content {
    min-height: 0;
}

.container-blueprint {
    height: 100%;
}

---

Related Topics