Percentage-based framework for CSS grid system

Exploring the world of CSS grids has been a fascinating learning journey for me. After delving into my research and consulting resources like:

http://css-tricks.com/dont-overthink-it-grids/

I've noticed that percentage-based grids generally make the most sense. However, when it comes to dividing elements into thirds, things can get a bit tricky. How do you deal with fractions that need to add up to 100%?

For example, 33% + 33% + 33% equals 99%. What impact does this have on utilizing thirds in CSS frameworks for grid layout?

Additionally, why do many frameworks emphasize so many column units? Take YUI Pure, for instance, which supports 24 units. This approach seems to complicate the CSS code unnecessarily. Is the aim to achieve "pixel perfect precision" at the cost of readability?

In my opinion, supporting just 4 or 5 columns makes more sense. Nested grids could provide finer control over layout design.

Isn't using a grid meant to move away from pixel-perfect layouts anyway? Most modern websites are already structured into 4 or 5 columns.

What are your thoughts, experiences, and recommendations on this topic?

css

Answer №1

Here are some responses to the numerous (but awesome!) questions you raised:

  • It's not necessary for percentages to be whole numbers. Using width: 33.3333% can give you a result very close to 100%. While it may fall slightly short of full width, the difference is usually imperceptible.

  • Why opt for multiple columns? Because content comes in varying sizes, and more columns mean greater flexibility in your grid layout. Take a look at this informative presentation on grids titled "Grids Are Good (Right?)"—even though it's a few years old, the concepts are still relevant. You can access it in PDF format or view it on slideshare.

Answer №2

When it comes to arranging elements, using columns can offer a higher level of control. Personally, I prefer working with a 16-column grid system (4,4,4,4) for my desktop designs, but you have the flexibility to position elements anywhere from column 3 to column 6 if needed.

To help illustrate this concept further, I have included a visual reference for better understanding.

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

When the width is reduced to a certain point, the display will change to inline-block, preserving the layout structure

My goal is to maintain a two-column layout for my container boxes, even when the browser width is minimized to 600px in my fiddle. The issue arises with the CSS rule display: inline-block causing the boxes to stack into a single column. Important point: I ...

javascriptjqueryhtmlcss

There seems to be an issue with the on() function in jQuery when using mouseover

I am trying to implement a small popup box that appears when I hover over some text, but for some reason it's not working as expected. Can someone please help me troubleshoot this issue? My goal is to display the content from the "data-popup" attribut ...

jqueryhtmlcss

How can I style the empty text in an ExtJS grid using CSS?

Is there a specific CSS class for a grid's emptyText? After inspecting the element with Firebug, all I found was: <div id="gridview-1021" class="x-component x-grid-view x-fit-item x-component-default x-unselectable" role="presentation" tabindex=" ...

javascriptcssextjsextjs4

Finding image input loading

When working with the following code: <input type="image" ... onLoad="this.style.opacity = 1" /> Everything seemed to be functioning well in IE, but encountered an issue in Chrome where the onLoad event failed to trigger upon image load. It's ...

javascripthtmlcssonload

What are some ways to prevent popups from being hidden by CSS?

I encountered a problem with my popup that I created using pure CSS. When I move my mouse to the top or bottom of the window, the popup disappears. However, if my cursor is in the body area, the popup appears as intended. I have not used any JavaScript in ...

htmlcss

The mp4 video on the website will only load if the Chrome developer tools are activated

Whenever I try to play the video set as the background of the div, it only starts playing if I refresh the page with Chrome dev tools open. HTML: <div id="videoDiv"> <div id="videoBlock"> <img src="" id="vidSub"> <video preload="prel ...

htmlcssmp4

Synchronizing two navigation menus on a single-page application website

Let me start by saying that I specialize in back end development and am facing a specific challenge with building a website that includes two navigation menus. The main navigation menu features links like Home, while the sub-navigation menu includes option ...

javascriptjquerycssangularjstwitter-bootstrap

Show the initial instance following a nested class

I need the first .tab class that directly follows the .tab-wrapper class to be visible, while the others should remain hidden <ul class="tabs"> <li>1</li> <li>2</li> </ul> <div class="tab-wrapper"> &l ...

css

What is the method to create a link that doesn't take up the entire page?

As a beginner in HTML, I have been working on a website for fun and facing an issue with buttons. When I add a button, the entire area becomes clickable, even if there is empty space around it. This means that you can click on the left or right side of the ...

htmlcss

Avoid activating jQuery functions based on certain screen widths for menu/navigation system

Recently, I've delved into the world of jQuery and attempted to create a simple menu system. The menu is designed to expand its submenu when hovering over the list item at screen widths larger than 480px, and to expand when clicking on the list item a ...

javascriptjqueryhtmlcssnav

Unleashing the Power of Resetting CSS Class Attributes in Twitter Bootstrap

Last year, @Andres Ilich shared a remarkably elegant solution for centering the navigation bar in Bootstrap. Here is an excerpt from the answer he posted: Visit here for more details. <div class="navbar navbar-fixed-top center"> <div class=" ...

javascriptjquerycsstwitter-bootstrap

Discovering multiple classes in a CSS file can be achieved by using specific selectors and searching

I am attempting to phrase my question differently: As mentioned in a book: "multiple classes: p.testorosso.grassetto {color: red; font-weight: bold;} This rule will apply the specified styles to all elements that contain the names of the defined classes ...

css

Tips for updating the color of an active navbar:

<div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item mx-4"> <a class="nav-l ...

cssbootstrap-5

CSS: Ensuring the width is adjusted to the content or wrapper that is wider

I am facing an issue with mouse-over highlighting on a set of list items. Below is the HTML structure I am working with: <div id="wrapper"> <div id="box"> <div class="item">Lorem ipsum dolor sit amet, sit nonumy utamur ponderum ex& ...

htmlcsswidthhorizontal-scrolling

What is the best way to extract the numerical value from a JavaScript object?

I'm currently working on a web form for a currency exchange demonstration. I have included a snippet of HTML and Javascript code that I have initially implemented. <!DOCTYPE html> <html lang="en"> <head> <meta charset="ut ...

javascripthtmlcssarraysobject

Ways to eliminate extra space from the edges of a container

Trying to wrap my page in a Material UI container component, but there's this persistent whitespace on the outside that no matter how much I tweak the margin and padding, it just won't disappear. Any CSS wizard out there with a workaround to make ...

cssreactjsmaterial-ui

Embedded tweets may occasionally lose their borders when viewed on various web browsers

My goal is to showcase a collection of responsive embedded tweets in rows of 2. Here are the key elements of the code that have enabled me to achieve this: HTML <div id="tweets"></div> <script src="https://platform.twitter.com/widgets.js" ...

javascripthtmlcsstwitter

Is it possible to incorporate a variable into the name of a mixin function in Less?

Could it be feasible to implement this in a way I haven't considered yet? I'm attempting to include a variable in the mixin function's name. @mybar: Test; .mymixin() { padding: 10px; } .mymixin@{mybar}() { padding: 10px; } .test { ...

cssless

Adjust the column count based on the screen size, Susy suggested

When using the Compass/Sass plugin Susy, you typically set the number of columns in the _base.scss file. I prefer to have 12 columns for a desktop view, but this may be too many columns for a mobile display. Is there a method to alter the number of column ...

csssasssusy-compass

In search of a mobile web UI framework solely built with CSS styling

Currently in search of a CSS framework that specializes in styling form elements and lists for optimal small screen use. The ideal framework must be CSS only, requiring minimal to no JavaScript. Something along the lines of Twitter Bootstrap would be per ...

htmlcssmobile