Update the screen layout to a grid when the screen is resized

I have a very specific request regarding the user experience. I want to display four links within a container, positioned next to each other in one row with a vertical line separating them.

For example:

Link one | Link two | Link three | Link four

This layout works when all the links fit within the container. However, if the screen size decreases and the links no longer fit, I would like to switch to a layout with 2 rows and 2 columns, with a horizontal divider between the rows. Additionally, the number of links is variable, so if there are only three links, the third link should extend across the bottom row.

For example:

Link one | Link two

Link three | Link four

Or

Link one | Link two

Link three

I am looking to achieve this behavior without relying on JavaScript, if possible. Ideally, I would like to utilize Flexbox or Bootstrap. Is this possible?

htmlcssbootstrap-4flexboxwindow-resize

Answer №1

One approach you can take is to utilize grid layout and media queries:

.container {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   text-align: center;
   margin: 1em;
}
a {
  border-right: 1px solid grey;
}
a:last-child {
   border-right: none;
}
@media screen and (max-width: 500px) {
 .container {
    grid-template-columns: repeat(2, 1fr);
  }
  .container a:nth-child(1), a:nth-child(2) {
    border-bottom: 1px solid grey;
  }
  a:nth-child(2) {
    border-right: none;
  }
  a:nth-child(3):last-child {
    grid-column: 1/3;
  }
}
<div class="container">
  <a>Link 1</a>
  <a>Link 2</a>
  <a>Link 3</a>
  <a>Link 4</a>
</div>

<div class="container">
  <a>Link 1</a>
  <a>Link 2</a>
  <a>Link 3</a>
</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

Webpage with visual representation

Currently in the process of redesigning my university's drama department website, I'm looking to incorporate three images side by side with spacing and captions. The captions need to have a header that's styled differently from the caption i ...

htmlcss

Making Bootstrap div stretch vertically with absolutely positioned content

Is there a way to make the middle div expand vertically on screen sizes smaller than 1000px without causing the text to flow under the image in the third div? Even clearing floats doesn't seem to solve the issue. This code is based on Bootstrap 4.4. ...

htmlcssbootstrap-4

Customize the appearance of a <label> tag when it is inside an <input> tag that is marked as invalid

In an ideal scenario, I wish for the text on a label to change color when the input value is considered invalid. For instance: <form> <label> Enter your name: <input type="text"> </label> </form> Ideall ...

htmlcsscss-selectors

The code snippets provided in the Bootstrap documentation are not functioning as expected

<nav class="navbar navbar-expand-lg navbar-light bg-light"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbar ...

djangobootstrap-4

Save JSON data in an HTML document or vice versa

Hey there, the title of this post might seem a bit unclear but I couldn't think of another way to phrase it. So here's the dilemma: I have some data that is JSON encoded and stored in a .json file: {"foo":"bar", "bar":"foo", "far":"boo"} Additi ...

javascriptjqueryjsonhtmlelectron

buttons are arranged horizontally, stacked neatly on top of one another

I'm currently working on a setup for toggle buttons using absolute positioning for labels on top of checkboxes. My goal is to have them aligned horizontally, but instead, they are stacking on top of each other. <ul style="display: block; float: le ...

htmlcssbuttoncheckbox

How can I execute a Python script on an HTML webpage by clicking a button?

Below is the HTML code I have written: <script> function goPython(){ $.ajax({ url: "MYSCRIPT.py", context: document.body }).done(function() { alert('finished python script');; ...

javascriptpythonhtmlajaxcgi

Tips for transferring the clicked value to the next page

Recently, I started working with Ionic and developed an application using it. Now, I am facing a challenge where I need to pass the value from the first page to the second page. To illustrate this more clearly, I have attached two photos. Here is the imag ...

javascriptjqueryhtmlangularionic3

Header on top of table that stays in place with scrolling

I'm facing an issue with a table that contains user-generated data. We are utilizing a plugin known as Clusterize, which allows us to smoothly scroll through large amounts of rows. However, the specific markup required for this plugin seems to be caus ...

javascriptjquerycssclusterize

What is the best way to store an HTML header text file in a PHP variable?

Here is a snippet of my HTML file: <form action="cnvrt.php" method="POST" > Enter your text here - <input type="text" id="in" name="in"> <br> <input type="submit" value="submit" > </form> This is how my PHP file look ...

phphtmlajaxjson

Having difficulty maintaining the consistent size of the MathJax math font in relation to the surrounding text

Issue I am currently using MathJax to display mathematical equations on my webpage: https://i.sstatic.net/EfvVq.png The problem I am facing is that I want the math font to appear larger than the surrounding text, as depicted in the image above. However, ...

javascripthtmlcssfontsmathjax

What is the method for ensuring text remains within a square while it is being relocated?

Check out this jsfiddle where you can interact with a moving square: http://jsfiddle.net/helpme128/3kwwo53t/2/ <div ng-app="test" ng-controller="testCtrl"> <div id="container"> <div class="shape" ng-draggable='dragOptions& ...

javascripthtmlcssangularjs

Ways to eliminate spacing from a bullet point in a list?

Is there a way to eliminate indentation from ul? I attempted adjusting margin, padding, and text-indent to 0, but with no success. It appears that setting text-indent to a negative value works - but is this the only solution for removing the indentation? ...

htmlcss

Separate a single large table into two smaller tables based on the information found in the third column of every row

Looking for a Greasemonkey script that can split a single table on a page into two separate tables based on a specific column. For example, if we have the following table: <table> <tr> <td>Jill</td> <td>Smith</td ...

javascriptjqueryhtmlhtml-tablegreasemonkey

Retrieve the URL redirected by JavaScript without altering the current page using Selenium

Is there a way to extract the URL I am supposed to be redirected to upon clicking a button on a website, without actually being redirected? The button triggers a complex Javascript function and is not a simple hyperlink. click() method doesn't meet my ...

javascriptpythonhtmlselenium-webdriver

Validating Color Properties with CSS 3.0

When using Visual Studio 2012 (Ultimate), a red squiggly may appear indicating that rgba(255, 255, 255, 0.4) is not a valid color property value However, according to the W3C, it is considered a valid value. Could this be a bug in Visual Studio, or am ...

cssvisual-studiow3cw3c-validation

The request parameter is missing when trying to invoke methods on the MultiActionController

During the Spring 3.0 era suppose I have a jsp page with two different links, each calling a different method on MultiActionController <form:form method="POST"> <a href="user.htm?action=add" style="color: blue;">Add</a> <a hr ...

javahtmlspringspring-mvc

PHP do-while loop triggers out of memory error while running SQL query code

While running the code below, the website crashes with the error: "Allowed memory size of 268435456 bytes exhausted (tried to allocate 254643 bytes)" $queID = "LCGQ00" . $ID; $sqlquecheck = "Select QueryID FROM Questions Where QueryID = & ...

phphtmlmysqlsql

Using Vue to alter data through mutations

Greetings! I am currently in the process of developing a website for storing recipes, but as this is my first project, I am facing a challenge with modifying user input data. My goal is to create a system where each new recipe added by a user generates a u ...

javascripthtmlcssvue.jsvuex

Is there a way to disregard the active region of a child element while the parent is active?

Currently, I am working on building a to-do list application using React. In the CSS styling, I have implemented an animation for when an li element is active, causing it to expand in height. The issue arises from the fact that I have also set up an onClic ...

htmlcssreactjsdesign-patterns