Creating a grid cell that spans the entire grid width

Question

Creating a grid cell that spans the entire grid width

Snippet of CSS Code:

.wrapper {
  display: grid;
  position: relative;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 25vh;
  width: 100%;
}

.prova {
  border: 1px solid;
}

.wrapper div:nth-child(2) {
  grid-column: 3;
  grid-row: 2 / 4;
}

.wrapper div:nth-child(5) {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

width: 100%;
background-color: none;
overflow: auto;
position: fixed;

}

<div class="wrapper">
  <div class="prova">1</div>
  <div class="prova">2</div>
  <div class="prova">3</div>
  <div class="prova">4</div>
  <div class="prova">5</div>
  <div class="prova">6</div>
  <div class="prova">7</div>
  <div class="prova">8</div>
  <div class="prova">9</div>
  <div class="prova">10</div>
  <div class="prova">11</div>
  <div class="prova">12</div>
</div>

The layout currently has four cells in the last row. I am looking to either merge them into a single long cell or create an additional cell below them extending as wide as specified.

https://i.sstatic.net/QvgzF.png

html css grid

Answer 1

Answer №1

Utilize the CSS property grid-column: span 4; on the last child element to make it span across all columns:

.container {
  display: grid;
  position: relative;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 25vh;
  width: 100%;
}

.item {
  border: 1px solid;
}

.container div:nth-child(2) {
  grid-column: 3;
  grid-row: 2 / 4;
}

.container div:nth-child(5) {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.container div:last-child {
  grid-column: span 4;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
</div>

Answer 2

Utilize the CSS property grid-column: span 4; on the last child element to make it span across all columns:

.container {
  display: grid;
  position: relative;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 25vh;
  width: 100%;
}

.item {
  border: 1px solid;
}

.container div:nth-child(2) {
  grid-column: 3;
  grid-row: 2 / 4;
}

.container div:nth-child(5) {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.container div:last-child {
  grid-column: span 4;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
</div>

Creating a grid cell that spans the entire grid width

Answer №1

Similar questions

Is it possible to utilize arrow functions in Vue while using style binding?

What are the steps to embedding a Facebook video on a website?

Creating an HTML form that submits data to a PHP script, which then saves the

Troubleshooting problems with Bootstrap datepicker in a Vue project

Can you explain why this unexpected bootstrap positioning is happening?

Rearranging the Foundation Grid by incorporating smaller panels ahead of larger panels

What is the best way to ensure consistency in a value across various browsers using Javascript?

Displaying and hiding a div element using Vue.js dynamically

The information displayed in the tooltip exceeds the capacity of the column

Utilizing Google Chrome Developer Tools for JQuery console debugging

I found that the Angular checkbox was only allowing me to select one value at a time instead of

Is there a practical limit for uploading HTML files?

Avoiding uib-popover from getting clipped by uib-carousel

Tips for addressing flickering issues when scrolling on your device

Vue application experiencing issues with applying Sweet Alert CSS styles

It's proving difficult for me to align my header and navbar on the same line

What is the best way to adjust the size of a DIV containing a background

Retrieving Checkbox Values in PHP: A Step-by-Step Guide

How can we effectively transform an HTML opening and closing tag into a function?

Learn the process of utilizing Javascript to substitute additional texts with (...) in your content