CSS Grid layout with a division into six equal parts

Implementing Pure CSS framework from Yahoo.

In the provided code snippet, the first two div grids display correctly. The children of the first grid are divided equally into 1/6th each, while the children of the second grid are split into 1/6th and 5/6th respectively. However, in the third grid, there seems to be an issue where the 1/6th division renders fine but the 3/6th and 2/6th divisions are not displaying properly as showcased here. Can anyone shed light on why this is happening?

<div class="pure-g">
    <div class="pure-u-1-6"> 1 </div>
    <div class="pure-u-1-6"> 2 </div>
    <div class="pure-u-1-6"> 3 </div>
    <div class="pure-u-1-6"> 4 </div>
    <div class="pure-u-1-6"> 5 </div>
    <div class="pure-u-1-6"> 6 </div>
</div>
<div id="content" role="main" class="pure-g">
    <div class="pure-u-1-6"> 1 </div>
    <div class="pure-u-5-6"> 2 </div>
</div>
<div class="pure-g">
    <div class="pure-u-1-6"> 1 </div>
    <div class="pure-u-3-6"> 2 </div>
    <div class="pure-u-2-6"> 3 </div>
</div>

Answer №1

The classes pure-u-3-6 and pure-u-2-6 are not available in pure.css

Instead, you can use pure-u-1-2 and pure-u-1-3.

To see the updated version, check out this Fiddle:
https://jsfiddle.net/u8ywdx06/2/

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

Using Sass to create dynamic variables with other variables

Is it possible to reference variables based on the value of another variable? This functionality exists in languages like PHP. For example, in Sass: I have variables $green, $blue, and $yellow being included from a partial. I want to dynamically set the ...

Loading jQuery via JavaScript in the head section of the HTML document

I'm currently developing an application using jQuery and jQuery Mobile. I have a script in the head section that dynamically loads both libraries. However, my body contains a script that relies on jQuery ($) and is unable to access it because it loads ...

Issue with printing data consecutively using Javascript

My JavaScript code aims to display the content of the body tag again when the add button is clicked. The purpose is to add authors, with each author being added in sequence. For example, if there is only 1 author present, the user simply selects whether th ...

jQuery fails to update the CSS3 animation speed dynamically in IE10

I am currently working on a side project that involves using moving divs with @keyframes and CSS3's animation property. Initially, I faced difficulties in getting this to work smoothly on webkit browsers due to issues with transform3d. However, after ...

How to store selected checkbox values in an array using AngularJS

Check out this code snippet: <tr ng-repeat="doc in providers"> <td><input type="checkbox" ng-true-value="{{doc.provider.Id}}" ng-false-value="" ng-model="ids"></td> </tr> {{ids}} I am trying to store the values of ...

Positioning two social media share plugins (Facebook and Twitter) side by side on a single line (vertically aligning them

Having implemented Twitter and Facebook share plugins on my site, showcased in this example, I'm facing the challenge of aligning the buttons vertically. Despite attempting to adjust margin-top and padding-top attributes, the alignment issue persists. ...

Ways to stop inline divs from shifting to a new line inside their container

My issue involves two inline divs that are wider than their parent element, causing the second div to drop down to the next line. Here's a link to see it in action: http://jsfiddle.net/uVqG6/2/ How can I prevent the second div from wrapping to the ne ...

Place the small span element underneath the title span

I am currently working on a layout that includes a list item with the title "Item 0", followed by a small tag containing the text "Description Item 0", and two select menus positioned to the right. The challenge I am facing is placing the small tag below t ...

Creating a menu bar in jQuery that functions similarly to tabs, but without the need to change divs

Currently, I am exploring ways to create tab functionality similar to jQuery's tabs plugin but without the need to switch between DIVs. Essentially, I am looking for a jQuery plugin that solely handles rendering the tab bar and allows me to designate ...

Screen the HTML content surrounding a specific class for any unwanted elements

I am facing a challenge in eliminating specific elements from an HTML page that was generated. The element I need to remove looks like this: <a id="10:51:16.642481" name="10:51:16.642481" href="#10:51:16.642481" class="ts"> [10:51:16]</a> &l ...

What is the best method for selecting the parent using jQuery?

How can I dynamically add a "selected" class to the parent item if any of its children have a "selected" class in my recursive menu setup shown below? <ul> <li class="administration first"> <a href="/administration.aspx">&l ...

What causes the HTML element's X position value to double when its X position is updated after the drag release event in Angular's CDK drag-drop feature?

I am facing a challenge with an HTML element that has dual roles: Automatically moving to the positive x-level whenever an Obsarbalve emits a new value. Moving manually to both positive and negative x-levels by dragging and dropping it. The manual drag a ...

Text in anchor vertically centered across browsers

Take a look at my JsFiddle project here: http://jsfiddle.net/JxXHE/ I want to ensure that the text in the menu items is perfectly centered vertically, with an 8px margin from the top and bottom in all browsers that are supported. The list of supported bro ...

Issue with dropdown menu items inheriting CSS border from parent menu item

I am facing an issue with the drop-down menu I created, as some of the sub menu items are inheriting CSS properties from the parent menu item. In particular, the sub menu items are picking up the blue border from the parent and the light blue background c ...

CSS-only checkboxes are not functioning properly in WordPress

I discovered some amazing pure CSS checkboxes that I wanted to implement (http://codepen.io/imohkay/pen/zFwec) on a WordPress website utilizing the Contact Form 7 plugin. However, after selecting these checkboxes, nothing seems to happen. To resolve this ...

Dynamic styles object for React components with inline styles

I have a styles object let styles = { step_div:{ height:'150px', } } I'm trying to display multiple div elements with different colors using React class Layout extends React.Component{ constructor(props) { super(props); ...

HTML unique flex wrapping

https://i.sstatic.net/ekVr4.png #menu { display: flex; justify-content: space-evenly; align-items: center; margin: 0 5px 0 5px; height: 30px; flex-wrap: wrap; } .menu_item { margin: 0 10px 0 10px; } .menu_item2 { margin: 0 10px 0 10px; } <div id="m ...

Generate hyperlinks in HTML with PHP by utilizing XML

I am looking to create links for my website based on an XML document structure. Here is an example: <menu> <item> <name>Menu Item One</name> <itemurl>folder\location\page.php</itemurl> <captio ...

Tips for concealing a button within an ajax response

My JavaScript page includes an AJAX call, and here is the code snippet... $("#txn_post").dialog({ modal: true, title:"Transaction", show: 'blind', hide: 'blind', width: 740, height:550, ...

Javascript dynamically generates CSS animations

I need assistance creating a div with a CSS3 animated timer inside it when a button is clicked. Here is the code I have been working on: http://jsfiddle.net/arcco96/y5nov6rz/1/. Unfortunately, the div is not being created as expected. I believe the code sh ...