Begin and terminate grid columns without indicating a specific starting or ending point

In my CSS project, I am working with a class named .col3 which serves as a grid item within a div carrying the class of .container.

The parent container has the property 

grid-template-columns: 25% 25% 25% 25%
, defining its layout.

I would like the .col3 class to span across 3 columns. While the typical approach is:

.col3{
   grid-column-start: 1;
   grid-column-end: 4;
}

This method does not address occasions when I want the class to start at column 2 and extend to the end. Is there a uniform way to achieve "make this class span 3 columns" without specifying the exact starting and ending columns?

htmlcsscss-grid

Answer №1

Is there a simple way to make this class stretch across 3 columns?

Absolutely!

grid-column: span 3;

Check out MDN for more information

span

This attribute adds a grid span to the grid item’s placement, extending it n lines from the opposite edge.

.col3 {
  grid-column: span 3;
  height: 50px;
  background: blue;
}

.col2 {
  grid-column: 2 / span 2;
  height: 50px;
  background: red;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 2px solid green;
}
<div class="grid">
  <div class="col2"></div>
  <div class="col3"></div>
  <div>

Alternatively, using -1 as the end value will extend the span to the last grid-column track.

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

In Vue.js, leverage the power of slots to access content from deeply nested child components

Recently, I came across this example: This child component serves as the foundation for all the components that follow. <template> <div class="content-box"> <div class="boxtitlecontainer titleColor"> <slot name="title"> ...

javascripthtmldomvue.jsslot

Retrieving identical information from multiple HTML files

Suppose I have multiple HTML pages from different websites, all with the same content. I am looking to extract this information in a versatile way so that I only need to create a few data extractors (ideally just one). Let's say the fields are (using ...

htmlweb-scrapingweb-crawlerextract

Slightly skewed 'outline' containing an odd number of dividers

I encountered a challenge while trying to create side-by-side elements with borders. I found that using the border property without adding some margin-hack made it difficult to achieve the desired look. Even when experimenting with outline or box-shadow, I ...

htmlcss

I am receiving a reference error even though the day variable has already been defined. Can you kindly point out

When I attempt to log in, the page is giving me the correct output. Interestingly, even after encountering an error, the webpage continues to function properly. app.get("/", function(req, res) { let day = date.getDate(); console.log(day); r ...

javascripthtmlexpress

Adjusting the header and unordered list on resize

I need help with my portfolio website. I can't seem to figure out how to make my header and navigation menu stack on top of each other when the page is small, and then go back to their normal layout when the page is larger. Below is the HTML code I&a ...

jqueryhtmlcssresize

The colors of my SVG button remain constant and do not dynamically change when I hover over it

I am facing an issue with a button that contains an SVG element. In my CSS, I have defined styles to change the color of the icon and the SVG when hovered over. However, I noticed that I have to directly hover over the SVG itself for the color to fill. As ...

htmlcsssvgbuttonhover

Showing the overflow scroll bar on both iOS and Android mobile devices

Is it possible to make the overflow scrollbar visible on mobile devices, specifically iPhones, Samsungs, and Safari browsers? The scrollbar is currently visible on desktops but not on mobile devices. I need a solution for this issue. Here is the current c ...

androidjqueryhtmlioscss

"Enhance Your Form with Ajax Submission using NicEdit

Currently, I am utilizing nicEditor for a project and aiming to submit the content using jQuery from the plugin. Below is the code snippet: <script type="text/javascript"> bkLib.onDomLoaded(function() { new nicEditor().panelInstance('txt1' ...

javascriptjqueryhtmlajaxnicedit

What is the best way to inject child nodes into parent nodes without causing the view to shift to the location where the element is being

While I am rendering elements and appending them to a parent div, my screen keeps jumping to the bottom-most element as it loads instead of maintaining the current view. Ideally, it should start at the top of the screen and remain there without any sudden ...

javascriptjqueryhtmlcss

The local server is having trouble loading JavaScript

I've been troubleshooting a sleek menu design, and I'm puzzled by why it's not working on my localhost. It functioned perfectly when tested on this Codepen. However, after transferring the code to my localhost, it stopped functioning. I&apos ...

javascriptcssvue.js

Utilize flexbox to make two elements on the same line

Is it feasible to have two elements on the same line when aligning a series of elements with flexbox? Consider this scenario: .outer { display: flex; flex-direction: column; margin-left: auto; margin-right: auto; width: 50px; } .outer .inner ...

cssflexbox

There was an error loading the resource as the Object does not have the method 'adGallery'

For the past two days, I have been attempting to implement the jQuery plugin "ad-gallery" on my website without success. I must mention that my knowledge in JavaScript and CSS is limited, so the issue could be something simple. The peculiar thing is that ...

jquerycssgallery

The webpage is not displaying any results despite using .innerHTML with Ajax

I am currently developing a web application that displays query results using the Google Books API. While my code is functioning, I am encountering an issue where the .innerHTML method does not show any results on the HTML page. Below is the HTML code bein ...

javascripthtmlajax

The margin-left attribute in HTML does not seem to be functioning properly

When I am working on a .php file, I dynamically generate HTML content (like a template) for each result returned from the search input: while ($row = mysqli_fetch_array($result)) { //image echo "<img id=" . '"' . "myImg" . '"' ...

phphtmlcss

Using a Python class instance as a parameter in a Bottle template

Here is how my class is structured: class Person: def __init__(name=None, id_=None): self.name = name self.id_ = id_ # The current way I am handling it is as follows. The member object is of type Person. return template('index.html&apo ...

pythonhtmlbottle

A guide on showcasing items on an html webpage through the use of javascript

Currently, I have a series of hardcoded HTML elements in my code snippet. <!-- Reciever Message--> <div class="media w-50 ml-auto mb-3"> <div class="media-body"> ...

javascripthtmlcssbootstrap-4

The jQuery toggle function is malfunctioning when applied to the rows of a table

I have been experimenting with toggling table rows using jquery. Initially, the state is hidden This feature is functioning properly $('.table tr.items.' + name).each(function() { $(this).show(); }); Furthermore, this snippet of code is wor ...

javascriptjquerycss

What is the best method to position this div above the other div?

I am facing a challenge in positioning one div above another in Bootstrap. Inside a parent div, I have two child divs - one with an image and the other with text. Despite trying various methods like adjusting margins using CSS, I cannot seem to get the de ...

htmlcssbootstrap-4

Tips for effectively arranging images in a spiral formation

I'm striving to replicate the layout showcased in this screenshot : https://i.sstatic.net/RBg62.jpg My attempt involved utilizing columns with bootstrap 4. Initially, the layout appeared intact, but the elements being within a container-fluid caused ...

htmlcssbootstrap-4

populating a HTML image tag 'src' attribute with data extracted from API javascript code

Hey there! I'm currently working on integrating an image element from the openweatherAPI that corresponds to the weather icon retrieved from the JSON data when a user inputs a city. This means displaying images like scattered clouds or clear skies bas ...

javascripthtmljsonapiopenweathermap