CSS Grid: Keep grid items contained

Currently, I am in the process of designing a layout that will work seamlessly on both mobile and desktop devices. On mobile, all elements should stack on top of each other, while on desktop, they should be displayed in two columns. Additionally, the order of elements will vary between mobile and desktop views.

https://i.sstatic.net/zdZvu.jpg My initial idea is to utilize CSS grid for this design.

Here's an example of the HTML structure:

<div class="grid-release">
    <div class="gi-cover">cover</div>
    <div class="gi-detail">detail</div>
    <div class="gi-head">head </div>
    <div class="gi-desc">desc</div>
    <div class="gi-media">media</div>
    <div class="gi-comment">comment</div>
</div>

The corresponding CSS code:

.grid-release {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "head"
    "cover"
    "detail"
    "desc"
    "media"
    "comment";
    grid-gap: 10px;
}

/* Additional styles for grid items */

@media screen and (min-width: 400px) {
    .grid-release {
        grid-template-columns: 1fr 2fr;
        grid-template-areas:
        "cover head"
        "detail desc"
        ". media"
        ". comment"; 
    }
}

To better visualize the result, you can view it here: https://jsfiddle.net/q3hpr0ak/

However, I have encountered some issues with item expansion affecting the layout integrity when viewed on larger screens. There are examples provided below:

Cover expansion impacting head: https://jsfiddle.net/z5jhewhb/1/

Detail expansion affecting desc: https://jsfiddle.net/Lh2y2pzp/2/

This has resulted in a less than desirable visual outcome, leading me to question if CSS grid is the appropriate solution for this project. Any advice or guidance would be greatly appreciated as I've been struggling with this challenge all morning.

Answer №1

If you prefer to maintain the height of the items on the left separate from those on the right in the same row, this goes against the core concept of grid layout.

Alternative layouts may be more suitable for your needs. For example, utilizing flexbox allows us to specify the order of elements.

Be sure to include

 align-items:flex-start; 

to prevent stretching and keep the items aligned properly.

https://jsfiddle.net/q3hpr0ak/2/

By adjusting the flex-flow from column to row-wrap based on screen size, we can easily switch between layouts. The "order" property and simple margins ensure each item is positioned correctly.

Answer №2

After reconsidering, I realized the solution is quite simple: utilize floats for desktop and flex for mobile to easily re-order items as needed:

@media screen and (min-width: 700px) {
  .container { display:block; }
  .cover, .detail{ width:33%; }
  .head, .desc, .media, .comment { width:66%; float:right; }
}

https://jsfiddle.net/q3hpr0ak/3/

Take a look at the jsfiddle, I believe it will work perfectly this time ;)

Answer №3

The main challenge lies in the dynamic positioning of the header. To tackle this, a simple grid structure can be used with left and right columns set at 1fr and 2fr respectively, each containing only one row. This setup works well as long as there is a specific height defined for the header that can act as a guide for the layout of the following elements.

@media screen and (min-width: 700px) {
  .container{
    grid-template-columns:1fr 2fr;
    grid-template-rows:1fr;
    grid-template-areas:"left right";
  } 

Check out this JSFiddle link for more information!

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

Refresh the page to load dynamically

My application includes dynamically loaded HTML. Here is a snippet of the related HTML and jQuery code: <div class="row"> <div class="navbar span2"> <div class="navbar-inner"> <ul class="nav nav-pills nav-stacked"& ...

JavaScript for Detecting Hits

I have recently ventured into coding as a beginner, and I have already created a calculator using Javascript, HTML, and CSS. Currently, I am working on developing a platformer game using JavaScript and HTML. I have set up the player, obstacles, canvas, fra ...

Modify the `div` content based on the selected items from the bootstrap dropdown menu

My navigation bar is built using Bootstrap and contains multiple drop-down items. Now I have another div with the class of col-md-3. Within this div, I would like to display the items of the dropdown menu when hovered over. Currently, hovering over a dro ...

Attempting to design a form that will trigger a print dialog box displaying all the information entered in the form

I am currently working on developing a form that will allow users to input information such as Name, Age, Gender, Hobbies, Contact details, and Photo in order to create a resume. My goal is to build a simple local HTML-based application that generates a RE ...

You are unable to move the image to the top of the screen after zooming it with CSS

I implemented an image viewer component with interactive buttons for rotating, zooming in, and zooming out. Upon clicking a button, CSS transform is applied to the image. However, I encountered an issue where, when zooming the image, it cannot be scrolled ...

What is the best way to utilize an HTML form input in order to update a value on a website that will affect all users?

I am relatively new to web development and I am currently working on a website that features a leaderboard. The goal is to allow users to input the number of points they have earned since their last log-in, with this value being added to their existing sco ...

Does anyone have a solution for avoiding the need to generate an HTML character code for displaying Time?

Is there a workaround for generating an HTML character code that resembles Time? Perhaps manipulating another character code to create a similar effect, or utilizing a font with symbols suitable for representing time. ...

Angular: dynamically updating scope when hovering over an element

Is there a way to have a child div of a main div hidden by default, only becoming visible when you hover over the main div? I'm looking for a solution using Angular and avoiding the jQuery .hover() method. My idea is to use ng-show on the child div ...

Tips for perfectly centering a SPAN element within a DIV both vertically and horizontally

Here is an example of my HTML code: <div id="slideClick"> <div style="padding: 0; margin: 0 auto; width: 100%; height: 100%; text-align: center; border: 1px solid blue;"> <span class="sideMsg">MESSAGES</span> </d ...

Struggling to align my Navbar items in one clean line, they seem to pile up and remain fixed on the left side. Utilizing ReactJS and MUi5

I'm struggling with aligning my Navbar items (NavLink) horizontally in one line instead of being stuck on the right side and stacked on top of each other. Can someone help me fix this issue? Here's the code snippet: import React from "react& ...

Visible background between div elements

There seems to be a background color visible between the image divs. I initially suspected it could be related to margins. Even after attempting to set the div to absolute positioning and the parent to relative, the problem persists. The picture still fail ...

Prevent horizontal scrolling on mobile devices

To prevent vertical scrolling on mobile devices, I attempted using the CSS code: body {overflow-x:hidden} This successfully disables vertical scrolling in regular browsers. However, if there is an element wider than the screen on mobile, it still allows ...

AngularJS's ng-click attribute is used to call a function within a controller

I am trying to invoke the Supportticket() function from myController on ng-click, but I am encountering issues with it not working as expected. Can someone please assist me with this matter? The Supportticket() method is located within the controller in my ...

Having trouble getting your React project to work because NPM start won't cooperate? Here are some troubleshooting tips

Hello, I recently downloaded a React project from https://github.com/fabiau/jc-calendar. However, when I try to run npm start, I encounter error messages. I have attempted to use "NPM Fund" and "NPM Update", but unfortunately, neither of them resolved the ...

Google Fonts are displaying in a bold style even when the bold property is not set

I need assistance with an issue involving emails going from Salesforce to Outlook 365. Here is the HTML code snippet: <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css"> <style> body ...

Exploring Kendo Pages with ID Navigation and Displaying Information

In my MVC project, I have two views. From View1, I am retrieving an ID and passing it to View2. In View2, I already have a KendoGrid set up with a controller that fetches data and displays it in the grid. My question is how can I access the data from the ...

The impact of angles on drop shadows in CSS3

Is there a way to replicate the shadow effect seen on the slider at using pure CSS? I've managed to recreate it in Photoshop, but I'm hoping to achieve the same result through CSS for a cleaner solution. ...

Radio button - arranging the background image and text in alignment

I'm struggling to align my custom radio buttons alongside text. Here is an example image: https://i.sstatic.net/2g5w8.jpg Despite using CSS for styling, I am unable to properly align the radio buttons. Below is a snippet of my HTML: label.item { ...

Sending information to other domains and managing the feedback

As a newcomer to Jquery, I am attempting to send data to a cross-domain and need to manage the response, which is a complete HTML page. Here is the code snippet I am using: $.ajax({ url: "http://www.somehost.com/abc/xyz.php", type: "post", d ...

Converting JSON data to a table in PHP with no records present

I need help displaying JSON output in an HTML table, but the table is showing a lot of empty records. (refer to photo below) <?php $json2=file_get_contents("****" . $row["Kenteken2"]); $data2 = json_decode($json2); if (strpos( ...