Define the number of columns in CSS Grid and ensure that rows wrap accordingly

tag, I need to utilize CSS grid with 12 columns while ensuring that the tables stack in a column layout when the viewport size decreases. Is it possible to accomplish this using CSS grid? My research suggests that for row wrapping, I must use either 'auto-fill' or 'auto-fit'. However, if I opt for these options, I lose the ability to specify the exact number of columns as required. Below is an example of the CSS code snippet showcasing how the grid structure should be implemented:
header
table 1
table 2
table 3
csscss-grid

Answer №1

You are unable to specify a fixed number of tracks using auto-fill or auto-fit.

§ 7.2.2.2. Repeat-to-fill: auto-fill and auto-fit repetitions

If the grid container has a definite size or max size in the relevant axis, then when auto-fill or auto-fit is specified as the repetition number, the largest possible positive integer that does not cause overflow is used.

If any number of repetitions would cause overflow, only one repetition is allowed.

To achieve your desired layout within the limitations of CSS Grid Level 1, it is recommended to use flexbox (demo) or resort to traditional media queries despite their drawbacks.

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

Safari on IOS transition transform feature malfunctions

Every time I try to apply some code to make a div move, for example using the latest iOS Safari browser, it fails to transition between the two rules set. I have experimented with different values other than percentage but still haven't been able to m ...

csssafaricss-transitionsvendor-prefix

Display or conceal the location where the click event occurs within a single div

progress $(".button-toggle").click(function(e){ $(this).parents.find('#second').toggle(); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="first"> <a href="#" class= ...

javascriptjqueryhtmlcss

Website loses its css after printing

I'm having trouble printing a website with a simple layout featuring two columns, each containing tables. The website I want to print is located at the following link: . However, when I try to print it using the JavaScript function window.print(), the ...

javascripthtmlcssprinting

Add a border to the element if its height exceeds 300 pixels

My web page has a dynamic element with an unpredictable height. As more content is added, the element grows, but I have restricted it with a max-height: 300px;. However, I would like to add a hint to the user when the element reaches its maximum height by ...

htmlcssangularjs

Ensure that the user remains within the current div when they click the submit button, even if the textbox is

For the past 48 hours, I've been grappling with an issue on my HTML page that features four divs. Each div contains three input fields and a button. The problem arises when a user leaves a text box empty upon submitting - instead of staying in the sam ...

javascriptjqueryhtmlcssajax

Adjust the CSS to give <a> elements the appearance of plain text

Is it possible to style an anchor tag to appear identical to plain text? Consider the following scenario: <p> Here is some text and here is a <a class='no-link' href="http://www.example.com" >link</a></p> I have atte ...

htmlcss

Tips for displaying an image using the image tag in jQuery

I am looking to dynamically append a share button image after every image tag that meets certain criteria. For the code snippet and demonstration, you can visit this fiddler link here. $(document).ready(function() { $("img").each(function() ...

javascriptjqueryhtmlcss

CSS - Adding a Distinctive "Line" to a Navigation Bar

I am attempting to design a unique navbar layout with two "lines". The first line should consist of several links, while the second line would include an HTML select field with a submit button. The following code will generate the desired navbar visual ou ...

css

Is there a way to extract shared properties within a Material UI style declaration?

I am working with a specific set of style rules that define different statuses: status_in_progress: { fontSize: 14, backgroundColor: theme.palette.success.dark, padding: 2, paddingLeft: 5, paddingRight: 5, display: "inline-bl ...

cssreactjsmaterial-ui

Are we utilizing this JavaScript function properly for recycling it?

Two functions have been implemented successfully. One function adds the autoplay attribute to a video DOM element if the user is at a specific section on the page. The other function smoothly slides in elements with a transition effect. The only limitatio ...

javascriptjqueryhtmlcss

JavaScript code does not seem to be functioning properly on my computer, but it works perfectly fine on

While the code functions perfectly in JSFiddle, it seems to fail when I try to implement it in an HTML file. Despite my efforts, I am unable to pinpoint the source of the issue. If you'd like to view the working version, here is the Fiddle demo. Bel ...

javascriptjqueryhtmlcss

How about trying out some dropdowns?

Following the issue I mentioned in my previous question titled Margin-Right on CSS not working, I am currently engaged in a creative endeavor to redesign my school's website homepage. The progress so far has been significant, but I now require some as ...

htmlcss

Organize your items vertically using jQuery Mobile's list feature

I am currently working on a mini chat application. The messages in the list are appearing side by side and I would like them to be displayed one below the other. Is there a way to adjust the CSS or add classes to achieve this? <div style="height:100% ...

jquerycssjquery-mobile

What is the best way to extract information from an XML file using JQUERY and present it neatly in a table format

I am looking to populate a table with data from an XML file as shown below: <table> <th>Head 1</th><th>Head 2</th><th>Head 3</th> <tr><td></td><td></td><td></td></tr> ...

htmljquerycssxml

Having trouble getting the overflow scrollbar to work properly?

I recently created a Whiteboard using Vue. The Whiteboard consists of an SVG element where I can add other SVG elements like paths to it. In order to enable scrolling within the SVG, I came across this example which seemed quite helpful. Check out the exa ...

htmlcssvue.jssvg

Tips on altering the h2 color when hovering using h2:hover:after

I'm attempting to alter the color of my h2 element using h2:hover:after. Can someone guide me on how to achieve this? Here is what I have tried so far. h2 { font-size: 25px; } h2:after { content: ""; display: block; width: 14%; padding-to ...

htmlcss

Blending HTML template and WordPress PHP file

I am facing a challenge while attempting to implement a Wordpress template on one of the pages of my website, specifically at http://www.windowblindshadeshutters.com/blog/. The blog has been successfully created, however, I am having trouble preserving our ...

phphtmlcsswordpress

Create a border around the text using a strokeoutline

I'm attempting to apply an outline to text using CSS. The issue I'm facing is that the shadow doesn't work well for perfectly stroked text. Is there a way to achieve this with just CSS? Below is the code snippet I am currently using: . ...

htmlcss

Tips for arranging divs in a row to switch to stacking when the screen size decreases

Sorry if this question seems repetitive, but as a newbie, deciphering posts from others has been overwhelming! I have two divs placed side by side within a wrapper, but I need them to stack on top of each other when viewed on a tablet or phone. Below is t ...

htmlcss

Issue with Aligning Text Inputs and Images in Firefox

I am really struggling with this issue and it's driving me crazy. The problem lies with an image positioned at the end of a text input, styled using CSS. Here is the code snippet: .text_input{ background:url(../images/forms/text_input_back.png) t ...

cssfirefoxtextboxalignment