Enhance your CSS Grid layout with push and pull functionality

I am currently using a CSS grid with 12 columns and I need to add pull and push classes. Could someone please assist me in extending my grid with these classes? Here is what I currently have:

.row                                { margin:0 auto; width:1200px; overflow:hidden; }
.row .row                           { margin:0 -20px 0 -20px; width:auto; display:inline-block; }

.grid_1                             { width:60px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_2                             { width:160px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_3                             { width:260px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_4                             { width:360px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_5                             { width:460px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }     
.grid_6                             { width:560px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_7                             { width:660px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_8                             { width:760px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_9                             { width:860px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_10                            { width:960px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_11                            { width:1060px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }
.grid_12                            { width:1160px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }

.offset_1                           { margin-left:120px; }
.offset_2                           { margin-left:220px; }
.offset_3                           { margin-left:320px; }
.offset_4                           { margin-left:420px; }
.offset_5                           { margin-left:520px; }
.offset_6                           { margin-left:620px; }
.offset_7                           { margin-left:720px; }
.offset_8                           { margin-left:820px; }
.offset_9                           { margin-left:920px; }
.offset_10                          { margin-left:1020px; }
.offset_11                          { margin-left:1120px; }
cssclassgrid

Answer №1

Understood. In case anyone requires it.

    /* Push & Pull */
    .push_1                             { left: 100px;  position:relative; }
.push_2                             { left: 200px; position:relative; }
.push_3                             { left: 300px; position:relative; }
.push_4                             { left: 400px; position:relative; }
.push_5                             { left: 500px; position:relative; }
.push_6                             { left: 600px; position:relative; }
.push_7                             { left: 700px; position:relative; }
.push_8                             { left: 760px; position:relative; }
.push_9                             { left: 860px; position:relative; }
.push_10                            { left: 960px; position:relative; }
.push_11                            { left: 1100px; position:relative; }
.push_12                            { left: 1200px; position:relative; }

.pull_1                             { left: -100px;  position:relative; }
.pull_2                             { left: -200px; position:relative; }
.pull_3                             { left: -300px; position:relative; }
.pull_4                             { left: -400px; position:relative; }
.pull_5                             { left: -500px; position:relative; }
.pull_6                             { left: -600px; position:relative; }
.pull_7                             { left: -700px; position:relative; }
.pull_8                             { left: -800px; position:relative; }
.pull_9                             { left: -900px; position:relative; }
.pull_10                            { left: -1000px; position:relative; }
.pull_11                            { left: -1100px; position:relative; }
.pull_12                            { left: -1200px; position:relative; }

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

What are some clever ways to handle the transition of the display property?

While transitions for the display property may not work, I am exploring alternatives. I attempted using the visibility property but it didn't quite fit my needs. In my current setup, different text is displayed when hovering over an anchor tag by sett ...

javascriptjqueryhtmlcss

Challenges arising from using 'top: 0px' in absolute positioning

I've been attempting to position some tags at the top: 0px of certain divs. The issue I'm facing is that when I use "top: 0px", it doesn't align my elements to the top of the parent div. After researching, it seems like this might be a "Co ...

htmlcsslayoutpositionmargin

Cannot access pseudo elements in the Microsoft Edge browser

Is there a workaround for not being able to select or access the properties of :before & :after elements on Microsoft Edge's inspect element? .arrow_box { position: relative; background: #d43959; border: 4px solid #ac1f3c; width ...

htmlcssmicrosoft-edgepseudo-element

Testing for Compatibility Across Different Web Browsers

What resources do you turn to for testing cross browser compatibility? Lately, I've primarily relied on Chrome developer tools, but they often lack accuracy. I attempted to test some projects using websites that claim to simulate various devices, bu ...

htmlcsscross-browser

Add styles to every table with the exception of a single one

Is there a way to avoid applying certain styles to a table when the screen size is small without having to introduce new CSS properties? I want to exclude specific tables from inheriting certain styles that are applied globally. Any suggestions on how I ...

csscss-selectors

The animated sticky header lacks smooth animation while scrolling upwards

This dynamic menu transitions the logo to the left and the navigation to the right as you scroll down. The animation is smooth when scrolling down, but slightly jerky when scrolling up, especially with the navigation. The animation uses CSS3: transition: ...

jquerycss

The if/else statement in my JavaScript code is malfunctioning, even though the individual code blocks have been tested successfully without the if/else

I have implemented an if/else statement to check the width of a div and adjust the iframe inside accordingly. The code itself runs without any issues, but I seem to be facing a problem with the if/else statement. You can view the site at Code: Javascript ...

javascripthtmlcssif-statementwidth

What is the best way to incorporate a link to a fontawesome icon along with text beneath it?

I have designed the following: <div style="margin-top: 1.2em"> <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-home icon-4x"></i> <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon- ...

htmlcsstwitter-bootstrapfonts

What is the best way to display my menu bar when the icon is hovered over?

I want to create a menu bar similar to the one found on . I am unsure of how they achieved this effect, but it seems to involve a scroll-over action. However, when I attempt to replicate it, the words still appear even when the menu bar is collapsed. < ...

htmlcssmenubar

Error: CSS - The background file could not be found

Hey there! I'm currently facing an issue with setting a background image on my website, as it's remaining white. When I checked through inspect element, it says that the image can't be found. The HTML file is correctly linked to the CSS fil ...

htmlcssnotepad++

Why Won't Your Overflow Scroll Work?

Having trouble getting the div with class .txtpodscroll to scroll? It seems like there might be an issue with nested DIVs or something missing in the code. The scrollbar appears, but it won't actually scroll. Here's the CSS rule applied to the DI ...

cssscrolloverflow

The premature firing of form validation click events is causing disruptions on all input fields. Additionally, I require assistance in effectively storing and comparing user sign-ins for login purposes at a later stage

I am facing issues with validating form inputs when a click event occurs. Whenever a user clicks inside any input field in my form, the validation process begins even before all fields are filled out. I need a solution where I can submit the form and ensur ...

javascriptjqueryhtmlcssforms

Creating a CSS login system for a website

I am struggling with floating my columns to the right and having them stack vertically with spacing in between. The CSS is linked to the HTML page, but some of it is included in the HTML file due to using Google Fonts. @charset "ISO-8859-1"; body { ba ...

htmlcss

Is it possible to utilize flexbox for organizing items in a list in a "pack" format?

Is it possible to use flexbox to make the last item in this list visually move up and "pack" itself into the available space? I am aware that achieving this layout could be done with different markup, such as using 3 columns and placing items within each ...

cssflexbox

I am having trouble with Mpdf's block absolute positioning feature not functioning correctly

I am trying to position my block using absolute, but it seems to be staying in the same place regardless of the left/top attributes I set. Here is the PHP code snippet: $mpdf = new \Mpdf\Mpdf(); $mpdf->WriteHTML($stylesheet,\Mpdf\HT ...

phphtmlcssmpdfabsolute

What is the process for invoking a method from a derived class using an object of the base class?

Even though I know this is going against the typical inheritance structure, I have a specific reason for wanting to utilize a base class object to access a method from a derived class. Imagine we have two classes that together hold a person's informa ...

c++classinheritancedowncastpure-virtual

Changing the font style using HTML/CSS is not supported in Opera, Webkit, and IE browsers

I am experiencing an issue where I have chosen a font from Google Web Fonts and integrated it into my HTML and a separate style sheet as follows: <link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type=& ...

htmlcsscross-browserfont-face

Assign a specific style to Fancybox links and buttons for managing the functions of 'next', 'previous', and 'close'

Utilizing the following jQuery script to hide a div whenever anything that does not have the class 'click' is clicked (used for empty space and certain other divs). $(document).click(function (event) { if (!$(event.target).hasClass('cli ...

jqueryhtmlcssfancyboxfancybox-2

JQuery is used to create a pop-up box

As a newcomer to JQuery, I am working on implementing a pop-up box on my webpage. Utilizing a jQuery plugin derived from Ray Stone's leanModal: (function($) { $.fn.extend({ leanModal: function(options) { var defaults = { top: 10 ...

javascriptjqueryhtmlcsspopup

Choose every fourth row in the table

Is there a way to alternate the background colors of selected groups of 4 rows in a table? I want to make one group red and the next group blue. Any suggestions or ideas on how to achieve this? <table> <tr style="background-color: red;"> ...

javascriptjqueryhtmlcss