Creating a fluid grid layout using CSS that consists of just two cells that adjust

Is it possible to design a flexible CSS grid layout with two cells that can switch between stacking vertically or horizontally to maximize the area of the second cell? (or similar heuristic)

Vertical Layout

Horizontal Layout

Ideally, the menu cell should have dimensions set to (min-content, min-content), and the body cell should be either (auto, 100%) or (100%, auto) for horizontal and vertical layouts respectively. My main challenges are figuring out how to: 1. Implement this behavior using CSS grids, and 2. Use CSS to determine whether to display the horizontal or vertical layout based on the area of the body cell.

htmlcssresponsive-designresponsivecss-grid

Answer №1

To create a horizontal layout, employ @media and adjust the width of the 2nd cell with width:100%;

Answer №2

Shoutout to @rijaul-sk for bringing up the @media tag, which led me to a solution inspired by his but with my own twist.

  @media (orientation: landscape) {
    div.ascii {
      grid-area: 1 / 2 / span 2 / span 1;
    }
  }

  @media (orientation: portrait) {
    div.ascii {
      grid-area: 2 / 1 / span 1 / span 2;
    }
  }

  div.container {
    display: grid;
    grid-template-columns: min-content auto;
    grid-template-rows: min-content auto;
    height: 100%; /*this seems necessary for some reason*/
  }

In essence, you set up the grid with 4 cells and make one span 2 of them.

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

Leveraging jQuery for dynamically populating <select> elements within an HTML document using JSON data

My goal is to populate my <select> element with country names from a JSON file using jQuery/ajax. <div id="navbar"> <label for="countrySelect">Select a country from the list:</label> <select id="count ...

htmljqueryjsonajaxcurl

Is it possible to incorporate @font-face with Ruby on Rails?

I've been struggling to implement my custom font in a Rails project. The font files are located in app/assets/fonts/. I made changes to the CSS: # in app/assets/stylesheets/application.css @font-face { font-family: 'fontello'; src: u ...

cssruby-on-railsrubyfonts

Could you please provide me with the option to send a list of the

Is there a way to send output via email instead of displaying it in the following div: <div id="fullCalendar" ></div> After spending a whole night searching online, I couldn't find a solution. As I'm not very familiar with jQuery pr ...

javascripthtmlajaxfullcalendarfullcalendar-3

Compatibility of HTML5 websites with Internet Explorer

Following a tutorial on HTML5/CSS3, I meticulously followed each step to create a basic website. While the demo of the site worked perfectly in Internet Explorer 8 during the tutorial, my own version did not display correctly when viewed in IE8. I discove ...

javascripthtmlcsscross-browserhtml5shiv

Creating a tree-like design with the spry accordion換stepping up your spr

I want to style my accordion in a way that it resembles a tree structure. How can I achieve this using CSS? For example: + should be displayed when the accordion tab is closed, and - when the accordion is open. <div class="Accordion" id="systemAccordi ...

javascriptjquerycssspry

Implementing jquery into Angular 2 webpack project is essential as jQuery is necessary for Bootstrap's JavaScript to function properly

I am currently utilizing the angular-cli .net core starter. As I attempt to incorporate my own CSS and JavaScript files, I encounter the following error: An unhandled exception occurred while processing the request. Exception: Call to Node module fail ...

jquerycsstwitter-bootstrapangularwebpack

Guide on adjusting padding for jQuery Flot graph for improved styling

I am utilizing jQuery Flot to generate a basic graph. I do not want the axes to display on either side, but this is causing the points to be slightly cut off. Any suggestions on how to resolve this issue? $.plot('#'+id, [ { data: data.values ...

jquerycssflot

I attempted to separate a string containing <br> tags using the explode function, but the method was not successful

In my code, there is a string that looks like this <br> ACCEPT:YES <br> SMMD:tv240245ce <br> This string is stored in a variable called $_session['result'] My task is to extract the following information either as an array or ...

phphtmlstringexplode

Can you assist me in finding certain Japanese Unicode characters?

I need help finding the Unicode Katakana characters for three Japanese symbols: https://i.sstatic.net/72V5g.png Although I found one of them, the closest matches I could locate are: ⽊ の ⺶ &#12106; &#12398; &#11958; Som ...

htmlunicodecharacterhtml-entitiescjk

Adjusting the empty image source in Vue.js that was generated dynamically

Currently experimenting with Vue.js and integrating a 3rd party API. Successfully fetched the JSON data and displayed it on my html, but encountering issues with missing images. As some images are absent from the JSON file, I've saved them locally on ...

javascripthtmlvue.jsvuejs2vue-component

PHP not incrementing UNIX Timestamp to consistent value

I am encountering an issue related to unix timestamps, php, and mysql. It would be really helpful if someone could clarify where I might be making a mistake or explain why I am getting the unexpected values. When utilizing jquery datepicker to send the da ...

phpjqueryhtmlmysql

Create custom buttons in Material-UI to replace default buttons in a React modal window

How can I prevent overlay on material-ui's RaisedButton? When I open a modal window, the buttons still remain visible. Which property should be added to the buttons to disable the overlay? Any assistance from those familiar with material-ui would b ...

cssreactjsmaterial-ui

A guide on restricting overflow in React Spring Parallax 'pages'

Currently, I have integrated React Spring Parallax () into my project found at this link: https://codesandbox.io/s/parallax-sticky-scroll-2zd58?file=/src/App.js Upon clicking the button to navigate to the next section, it is noticeable that the image over ...

cssreactjsparallaxreact-spring

Raycasting in three.js - mouse pointer and highlighting not precisely aligned with intersected mesh

My current setup involves using a raycaster to highlight a row of cubes arranged in a grid format. The highlighting works fine, but I'm encountering issues with the cursor turning into a pointer precisely over the cubes in the row. Moreover, the highl ...

javascriptcssthree.jsmouseoverraycasting

Ways to bypass HostListener in Angular 2

In the process of developing a page with animations triggered on scroll, I encountered the challenge of ensuring that the animations only occur when the corresponding element is visible on the viewport. Utilizing Angular2 for this task led me to investigat ...

javascripthtmlangulartypescriptangular2-template

Troubleshooting Nested Handlebars Problem

After creating a customized handlebar that checks for equality in this manner: Handlebars.registerHelper('ifEquals', (arg1, arg2, options) => { if (arg1 == arg2) { return options?.fn(this); } return options?.inverse(t ...

htmltypescripthandlebars.js

"Step-by-step guide on triggering the ng-click function for the first row within an ng

I'm facing an issue where the first set of data from the ng-repeat div is not loading before clicking on the ng-repeat. Below is the code snippet: <div class"profile" ng-repeat="data in information" ng-click="getData(data.i ...

javascripthtmlangularjs

Is it possible to use jQuery to load the content of the page?

Using jQuery to dynamically load html forms using the append function. The code below demonstrates how to load page content based on different values in a while loop. I have encountered an issue when trying to display content with different values. It wor ...

phpjqueryhtmlajax

A step-by-step guide on uploading files from the frontend and saving them to a local directory using the fs and express modules

I'm considering using fs, but I'm not entirely sure how to go about it. Here's the setup: ejs: <form action="/products" method="POST"> <input type="file" name="image" id="image"> <button class="submit">Submit</but ...

javascripthtmlnode.jsimagefs

Tips for formatting JSON using jQuery

Imagine my JSON data with 3 different sets of information: [ { "Pair":"", "Id":"8ca2df56-2523-4bc3-a648-61ec4debcaaf", "PubDate":"/Date(1463775846000)/", "Provider":null, "Market":"" }, { "Pair":"", ...

javascriptjqueryhtmlcssjson