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.

htmlcssgrid

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Switching the menu in mobile view: utilizing vue and pug

Hello, I am having trouble toggling my hamburger menu. When I check the console, it shows an error message: "nav is not defined". header.pug header.site-header div.navbar div.navbar__link.navbar--brand logo div.navbar ...

jqueryhtmlvue.jspugtoggle

Enable a single flex item to wrap across multiple lines

I have an HTML code snippet that needs to be styled using Flexbox. Specifically, I want to re-order the elements and create a 'line break' before the last item. How can I utilize Flexbox so that most flex items are treated as atomic units, but on ...

cssflexbox

Replace old content with new content by removing or hiding the outdated information

I need to update the displayed content when a new link is clicked index html file <a href="" class="content-board" > <a href="" class="content-listing" > content html file <div class="content-board"> <div class="content-lis ...

javascriptjqueryhtml

Immersive viewing experience

I am facing an issue with my full-screen bootstrap CSS website. The website appears normally, but the problem arises when Google Chrome or Internet Explorer shows the useful links bar. Is there a way to have the website display in full screen even when th ...

htmlfullscreen

"What are some creative ways to customize the appearance of a Material-UI Select-field Dropdown menu

I am currently utilizing the material-ui select-field component. <SelectField multiple={true} hintText="Checkbox Filters" dropDownMenuProps={{ iconButton:<ActionHome />, }} className="checkbox-com" underlineStyle={{display ...

htmlcssreactjsmaterial-ui

JavaScript Processing Multiple Input Values to Produce an Output

Hello, I am working on creating a stamp script that will allow users to enter their name and address into three fields. Later, these fields will be displayed in the stamp edition. Currently, I have set up 3 input fields where users can input their data. He ...

javascriptjqueryhtmlcss

Convert PHP code into an HTML table

Is it possible to insert date values into an HTML table column using the following code? <?php $startdate = strtotime("Monday"); $enddate = strtotime ("+3 weeks", $startdate); while ($startdate < $enddate) { echo date("M d", $startdate),"& ...

phphtml

What is the method for customizing the hover color in a mantine.ui menu?

I've been attempting to modify the menu color when hovering over it, but unfortunately, it's not working. Could anyone provide guidance on how to change the hover color in mantine.ui menu? ...

cssreactjsmantine

Identifying when a page-loading or reloading event has been canceled

When the Cancel button is pressed during page load/reload, the content of the page loads partially. Is there a more effective way to address this issue rather than displaying incomplete content? For instance, consider showing a message such as "Page load ...

javascripthtmljquerybrowser

Customizing Material UI Popover CSS classes within a Select component in a React application

I have integrated the Material UI Select component into my React project. I am attempting to customize the CSS classes .MuiPaper-root and/or .MuiMenu-list. This is how my Select component looks: <Select value={selectValue} disableUnderline onCha ...

cssreactjsmaterial-uiemotion

How can CSS be used to change the text color of input placeholder in Edge Browser?

While using Edge Browser, I encountered an issue where I was unable to change the input placeholder color. The :-ms-input-placeholder selector was not working on Edge, although it functioned properly on IE 10 and IE 11. input:-ms-input-placeholder { ...

htmlcssplaceholdermicrosoft-edge

Display only the highest image in the picture carousel using Jquery

My goal is to create a simple image slider using HTML, CSS, and Jquery. However, when I try to move it left by 750px, only the topmost image moves and the rest of the images are not displayed. It seems like all the images are moving at once instead of jus ...

jqueryhtmlcss

employing rowspan functionality within a JavaScript application

How can I achieve a table layout where the first two columns are fixed for only one row and the remaining rows are repeated 7 times? Additionally, is there a way to make the bottom border of the last row thicker? Check out the expected table for reference. ...

javascripthtmlcss

How to deactivate or modify the href attribute of an anchor element using jQuery

My HTML code looks something like this: <div id="StoreLocatorPlaceHolder_ctl07_ctl00_ctl00_pager_ctl00_ctl00_numeric" class="sf_pagerNumeric"> <a href="http://www.domain.com/store-list">1</a> <a href="http://www.domain.com/sto ...

javascriptjqueryhtml

Get a webpage that generates a POST parameter through JavaScript and save it onto your device

After extensive research, I have hit a roadblock and desperately need help. My task involves downloading an HTML page by filling out a form with various data and submitting it to save the responses. Using Firebug, I can see that my data is sent over POST, ...

javascriptjqueryhtmlwget

Switch the orientation of the unordered list from horizontal to vertical in a dynamic way

Perhaps a repeated inquiry, yet I have been unable to discover a solution for this issue... I am dealing with a div element (referred to as master) that I do not have the ability to adjust in terms of width or height. Contained within the master is anoth ...

htmlcssflexbox

Updating the Navigation Bar and Theme in CRM Dynamics 2013 to Reflect Your Organization's Branding

In my CRM Dynamics 2013 setup, I am faced with a unique challenge. I need to customize the Organization navigation bar based on which organization is currently loaded. Specifically, I have two organizations - QA and PROD. When a user switches to the QA org ...

javascriptcssdynamics-crm-2013

Limit the number input to only allow values between 0 and 100

I am utilizing the Number input component from MUI, which includes Increment and Decrement buttons for adjusting numbers. Is there a method to limit the input to only accept values ranging from 0 to 100 ? Additionally, how can I decrease the width of the ...

javascriptcssreactjsmaterial-ui

Problem with aligning an image horizontally within a DIV

Can anyone help me align the picture of the planet horizontally in the middle of the DIV section "about us" on my website? I've tried using text-align:center; in the CSS but it doesn't seem to work. Any suggestions would be appreciated. Thank you ...

cssalignment

Modify the pseudo element when a different class is active

I've encountered an issue while attempting to modify the after pseudo element when the .active class is applied. Despite my efforts, it doesn't seem to be functioning as intended. My current project setup involves using scss with Vue. I have tri ...

css