How can CSS grids adapt to different screen sizes and resolutions?

Currently experimenting with Unsemantic for responsive grids in CSS, but struggling to comprehend how it can effectively handle various resolutions like 400, 768, and 1024 with just two classes: grid-XX and mobile-grid-XX.

The Unsemantic CSS files contain media queries for all the mentioned resolutions, yet implementing them proves to be a challenge.

For instance, envisioning two columns on the main page where they are 50% wide each at 1024px or higher, 70% and 30% wide between 640 and 1024px, and 100% wide at 400px or less - is this feasible?

Are there any alternate responsive grid systems that offer simpler usage and comprehension?

Answer №1

I have encountered a similar situation in the past and successfully resolved it using Susy, rather than Unsemantic. You can find more information about Susy here.

Answer №2

Discover the potential of Cascade Framework.

With Cascade Framework's versatile grid system, you can achieve exactly what you have in mind. This comprehensive grid system offers support for various layouts such as 60%/40%, 25%/75%, 33.33%/66.66%, 20%/20%/20%/20%/20%, 43.75%/31.25%/25%, 30%/30%/40% and many more combinations. Moreover, you have the flexibility to create unique layouts like 42.8571429%/{fill to 100%}, {fit content}/{fill to 100%} or {fit content}/30%/{fill to 100%}.

In Cascade framework, a grid element is either one of specific HTML elements like section, main, article, header, footer, aside, nav (polyfilled with HTMLshiv for old IE) or a div element with a 'col' class (usable in old IE without polyfill).

To define the width of a grid element, simply add a class formatted as 'width-XofY', where Y can range from 2 to 24 and X is any value less than Y.

For example, valid classes in Cascade Framework include 'width-1of2' (50% width), 'width-3of4' (25% width), 'width-2of5' (40% width), 'width-13of16' (81.25% width), and more. Additionally, utilize 'width-fit' and 'width-fill' classes to adjust content fitting and filling within the 100% width.

If the responsiveness module is enabled, all grid elements automatically reset to 100% on mobile devices. Customize layouts for different screens using classes like 'mobile-width-3of16', 'phone-width-3of7', or 'tablet-width-2of4'. Utilize 'desktop-hidden', 'mobile-hidden', 'phone-hidden', or 'tablet-hidden' classes to selectively hide content on specific screen sizes.

Please note that the current version of Cascade Framework is purely CSS based. While default breakpoints are provided, they can be replaced with custom breakpoints in the source code if needed.

Explore more at and / .

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

Instructions on adding a solid border color to a circular div using CSS

Hey there! I'm curious, is it possible to style a straight border color on a rounded div using CSS? Here I have some basic Tailwind CSS code. <div class="rounded-2xl w-72 h-20 border-l-4 border-l-yellow-500"> ... </div> In the ...

Unique Google Maps API V3 PEGMAN Customization

Can custom zoom controls and Pegman controls be styled with the same design? To add custom zoom controls, follow the instructions provided in this question's answer: <!DOCTYPE html> <html> <head> <meta name="viewport" cont ...

JS seems to kick in only after a couple of page refreshes

I'm facing an issue with my 3 columns that should have equal heights. I've implemented some JavaScript to achieve this, which you can see in action through the DEMO link below. <script> $(document).foundation(); </script> <scri ...

Visible Overflow Causing Issues

When I shrink my browser window horizontally, my logo disappears, especially in mobile phone view. Check out zanifesto.com for more details. I have tried setting the css to overflow:visible, but it still doesn't solve the issue. My objective is to ...

Using asynchronous data in Angular 2 animations

Currently, I have developed a component that fetches a dataset of skills from my database. Each skill in the dataset contains a title and a percentage value. My objective is to set the initial width value of each div to 0% and then dynamically adjust it t ...

CSS exhibiting variations on similar pages

Although the pages look identical, they are actually pulled from the same template file in Drupal but have different URLs. nyc.thedelimagazine.com/snacks In my document head, I've included a style rule that overrides a stylesheet further up the casc ...

Why does the diamond symbol appear distorted on my iPhone screen?

My website is similar to SO where moderators have a diamond sign at the end of their name. However, I am facing an issue on my iPhone where the diamond sign looks red and distorted (on Chrome it appears normal). https://i.sstatic.net/RnpyP.jpg As you can ...

What could be the reason for CSS3 PIE failing to work on sub pages when an absolute path is used in the CSS file?

I am struggling with CSS styling and have created the following class: a.greenbutton, input.greenbutton { /*background: url("../image/button.png") repeat-x scroll left top transparent;*/ behavior: url("/css3pie/PIE.php"); -webkit-border-radiu ...

Update the icon using CSS style properties

I have been using liqour-tree and I need to change the arrow icon to a custom one. Unfortunately, I am not sure how to do this. Can someone please help me out? I have identified the element tag where the icon is placed. <i class="tree-arrow expanded ha ...

Changing the color of text in an HTML input field using CSS and JavaScript depending on the input value

Looking for a solution! // Getting user input values var input1 = parseInt(document.getElementById("input1").value); var input2 = parseInt(document.getElementById("input2").value); var input3 = parseFloat(document.getElementById(" ...

Display 3 images with the carousel feature on the middle image

Currently, I am utilizing the jquery.jcarousellite plugin and attempting to make the second image active. Below is the code snippet I have tried: <div id="jcl-demo"> <div class="custom-container auto moreItems "> <a href="#" c ...

Is there an issue with the CSS styling causing the IE7 button to not display correctly?

While testing my website in IE7, I noticed that the orange link box for create account is not displaying properly. The bottom of the orange rectangle appears to be cut off. Is there a CSS solution to fix this issue? If you have IE9, you can view this by go ...

Trouble with meta og:image on my SSL-secured WordPress site

Having some trouble adding meta properties to my WordPress website that is SSL certified. When I share the link on Skype and WhatsApp, the og:image is not working. I've tried multiple plugins and even directly added HTML code to my WordPress theme hea ...

Blank values are being submitted via the form

As I work on creating a basic form using a combination of HTML, CSS, and PHP, I've encountered an issue. While the form successfully sends an email to the designated recipient, it does not include any information entered into the form itself; only the ...

The interaction of a horizontal scroll bar on a CSS Grid layout triggers the appearance of a vertical scroll bar

I am facing a challenge with my HTML layout. In Chrome, when the horizontal scroll bar is visible, a vertical scroll bar also appears. However, in Firefox, everything works fine. This issue seems to be related to the height of the div not auto-scaling prop ...

Smoothly transition between the new and existing child elements in a React component with a

Currently, I am utilizing a React component that renders a child element through props.children. The content within this child element varies dynamically. I am looking for the most effective method to smoothly transition (fade out the old element and fad ...

Using the float property in IE7 can cause a line break and may result in other divs being pushed down

Hey there, I've encountered a few issues with floats in IE multiple times. Here's an example to illustrate what I mean. Please note that this example functions properly in Firefox and Chrome. index.html <html> <link href="style.css" rel= ...

Designing a Dynamic Floating Element that Shifts with Scroll Movement

Hey there everyone!, I am currently working on a project in Wordpress and I was wondering if anyone has experience creating a floating widget that moves along with the page as you scroll. Any suggestions on how to achieve this? Would it involve using Javas ...

Using Stylus and Nib CSS in a secure Node/Express application is causing Chrome to flag insecure JavaScript warnings

System notifications: The website at [...] encountered insecure content from http://fonts.googleapis.com/css?family=Quicksand. as well as The site at [...] showed insecure content from http://themes.googleusercontent.com/static/fonts/quicksand/v2/sKd0EM ...

How to retrieve an element by its class using JavaScript and Jquery while implementing a

I am working on creating a quiz example using Jquery, but I am facing some challenges when trying to manipulate CSS classes with hover in Jquery. .right{ background-color: white; } .wrong { background-color: white; } .right:hover { background-color ...