Ways to expand a grid layout in the vertical direction

I am looking to create a grid layout that grows vertically, similar to the image in this link below: https://i.sstatic.net/phNM8.png

Is there a default layout option for vertical growth? Currently, I am using the display:grid property.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
}

.grid-item {
  text-align: center;
}
<div class="grid-container">
  <div class="grid-item">item 1</div>
  <div class="grid-item">item 2</div>
  <div class="grid-item">item 3</div>
  <div class="grid-item">item 4</div>
  <div class="grid-item">item 5</div>
  <div class="grid-item">item 6</div>
  <div class="grid-item">item 7</div>
  <div class="grid-item">item 8</div>
  <div class="grid-item">item 9</div>
</div>

However, the current setup is growing horizontally instead of vertically.

htmlcss

Answer №1

A great way to organize your layout is by using the following CSS property:

grid-auto-flow: column;

For a complete CSS code example, see below:

 .grid-container {
        display: grid;
        grid-template-rows: repeat(4, 100px);
        grid-gap: 10px;
        grid-auto-flow: column;
    }

    .grid-item {
      /* Additional CSS styles can be added here */
    }

To see a demonstration of this layout in action, feel free to visit the demo here

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

What is the secret behind the functionality of this Jquery dark mode code?

I was experimenting with creating a dark/light mode toggle using jQuery and I came up with this solution One thing that puzzles me is when I remove the 'darkmode' class, instead of adding the 'whitemode' class, it simply adds the attri ...

javascripthtmljquerycss

an occurrence of an element being rendered invisible, within an instance of an element being rendered as flexible,

I am trying to create a button that will show a list of elements. Within this list, there is another button that can be used to either close the list or hide it entirely. However, for some reason, my code is not functioning properly. let btn1 = documen ...

javascripthtmlcss

Expandable Bootstrap collapse and accordion open horizontally, not vertically

I want to use Bootstrap collapse but I want to keep my div-s with the content beneath each link, mainly because that's how i need it to work on mobile (the menu is a column and that the content opens under each link). Unfortunately, on website I have ...

htmlbootstrap-4

assign a CSS style based on a JavaScript variable

I am looking to dynamically set the height of a cell in a table based on the window's height. I plan to retrieve the window's height using JavaScript and then incorporate it into the div style. <script language="javascript"> var width = is ...

javascripthtmlcssstylesheight

Is it possible to simultaneously execute an animate and a fade out effect?

Is there a way to simultaneously move "app1" to the left and fade it out? Currently, the functions are executing one after the other. I want them to occur simultaneously, without the left movement happening before the fade out. Thank you! <!DOCTYPE h ...

javascriptjqueryhtmlcss

Tips for successfully transferring values from an onclick event in JavaScript to a jQuery function

I am encountering a challenge with an image that has an onclick function associated with it. <img id='1213' src='img/heart.png' onclick='heart(this.id)'> This particular function needs to be triggered : function heart ...

javascriptjqueryhtml

Utilizing a Dynamic Database for HTML Navbar Items in an Asp.net Application

Currently, I am in the process of editing an HTML template that features a Navbar positioned at the top. While I have successfully managed to update the navbar items with those from the database, I am encountering difficulty changing the total Number of It ...

htmlasp.netnavigationnavbar

The capability to scroll within a stationary container

Whenever you click a button, a div slides out from the left by 100%. This div contains the menu for my website. The problem I'm encountering is that on smaller browser sizes, some of the links are hidden because they get covered up. The #slidingMenu ...

javascriptjqueryhtmlcss

Tips for arranging images of varying heights on separate lines so they appear cohesive as a group

I've been working with masonry.js but I'm still not achieving the effect I want. Javascript:` var container = document.querySelector('#container'); var msnry = new Masonry( container, {columnWidth: 200, itemSelector: '.item' ...

htmlcssimage

Certain iFrame instances are unable to display specific cross-domain pages

I'm currently working on a project to create a website that can embed external cross-domain sites, essentially like building a browser within a browser. I've been experimenting with using iFrames for this purpose: While it works for some pages, ...

javascripthtmlsecurityiframe

What is the best way to control the visibility of content using CSS based on the screen size?

Similar to Bootstrap, Ionic (specifically Ionic 3) allows for resizing column widths based on screen size using classes like col-sm-8, col-md-6, col-lg-4. Bootstrap also includes classes such as visible-xs, hidden-sm, etc. for displaying or hiding conten ...

csstwitter-bootstrapionic-frameworkionic3bootstrap-4

CSS Dilemma: Font Refusing to Change

Hey everyone, I'm new to web development and currently building a basic website on my computer. However, I'm facing an issue where the font I want to use is not changing. Both my HTML and CSS files are located in the correct folder and I am confi ...

htmlcss

Can custom HTML elements be designed to function similarly to standard ones?

What is the best way to create a custom HTML element that functions as a link without relying on inline Javascript? For instance: <x-button href="...">...</x-button> Can I develop an element like <x-button> that can accept an attribute ...

javascripthtml

Personalizing the Google Translate drop-down menu

I've recently implemented Google Translator on my website to allow users to view the content in different languages. Here is the code snippet I used: <div id="google_translate_element"></div> <div id="language"></div> <scr ...

jquerycssgoogle-translator-toolkit

An issue arises when attempting to send form information through email using PHP

I'm facing an issue with sending email from a form. Every time I submit the form, I receive an "error occurred" message as specified in my if else statement. This prevents the mail from being sent. Can you help me troubleshoot this problem? Below is t ...

phphtml

The redirection of the URL after form submission is not functioning correctly

I'm attempting to develop a pair of dropdown lists in Elementor where the second dropdown's options depend on what is selected in the first, and the second contains URLs linked to a GO button that redirects to the chosen URL. However, I've f ...

javascripthtmljquery

The functionality of the bootstrap Dropdown multiple select feature is experiencing issues with the Onchange

Creating a Bootstrap Multiple Select Drop Down with dynamically retrieved options from a Database: <select size="3" name="p" id="p" class="dis_tab" multiple> <?php echo "<option>". $row['abc'] ."</option>"; //Fetching option ...

javascriptjqueryhtmlajaxtwitter-bootstrap

set ajax url dynamically according to the selected option value

My form features a select box with three distinct choices <select id="tool" name="tool"> <option value="option1">Option1</option> <option value="option2">Option2</option> <option value="option3">Option3</ ...

javascriptjqueryhtmlajax

Modify the input field in the datepicker to resemble a button

How can I transform an input field into a button that looks like this https://i.sstatic.net/BDk5C.png rather than this https://i.sstatic.net/UdXoE.png? The simple switch of tag names doesn't seem to work. Any suggestions on how to achieve this? cla ...

javascriptjquerycssreactjsdatepicker

When working with multipart form data in Express JS, the values retrieved from text fields may appear as empty strings in the

I have a current project where I've implemented a basic sign-up page for users to input their information. The backend is built with express JS. Within this project, I added the functionality for users to upload a profile picture. However, in order f ...

htmlnode.jsexpressmultipartform-datamulter