Grid - two columns with gutters

Developer
Chris Wright
Size
2,922 Kb
Views
56,672
  1. Grid - two columns with gutters Previews
  2. Grid - two columns with gutters HTML Codes
  3. Grid - two columns with gutters CSS Codes

How do I make an grid - two columns with gutters?

What is a grid - two columns with gutters? How do you make a grid - two columns with gutters? This script and codes were developed by Chris Wright on 12 July 2022, Tuesday.

Grid - two columns with gutters Previews
IQ Test

Grid - two columns with gutters - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Grid - two columns with gutters</title> <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900|Raleway" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="support-warning"> This demo requires CSS Grid. The current browser you're using doesn't support it and is using a Flexbox fallback. Find a <a href="https://igalia.github.io/css-grid-layout/enable.html">grid-enabled browser</a>.
</div>
<div class="l-grid l-grid--half-half l-grid--gutter-large l-full-height"> <div class="l-grid__item l-grid l-grid--gutter-large l-center-center first-panel"> <div class="content"> <h2 class="heading">Down the Rabbit Hole</h2> <p class="description">Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, "and what is the use of a book," thought Alice, "without pictures or conversation?" </p> </div> </div> <div class="l-grid__item l-grid l-center-center second-panel"> <div class="content"> <h2 class="heading">Advice from a Caterpillar</h2> <p class="description">The Caterpillar and Alice looked at each other for some time in silence: at last the Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice.
“Who are you?” said the Caterpillar.
This was not an encouraging opening for a conversation. Alice replied, rather shyly, “I—I hardly know, Sir, just at present—at least I know who I was when I got up this morning, but I think I must have been changed several times since then.” </p> </div>
</div>
</body>
</html>

Grid - two columns with gutters - Script Codes CSS Codes

* { box-sizing: border-box;
}
.support-warning { background: #ccb11c; color: #000; display: block; font-family: 'Raleway', sans-serif; font-weight: 700; opacity: 0.95; padding: 3rem; position: fixed; text-align: center; top: 0; left: 0; width: 100%; z-index: 5;
}
.support-warning a { color: inherit;
}
body { background: #111; padding: 1rem;
}
.l-grid { display: -webkit-box; display: -ms-flexbox; display: flex;
}
.l-grid--half-half > .l-grid__item { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto;
}
.l-grid--gutter-large { margin-left: -1rem;
}
.l-grid--gutter-large > .l-grid__item { margin-left: 1rem;
}
@supports((display: -ms-grid) or (display: grid)) { .support-warning { display: none; } /* Only the display: grid part needs a feature query */ .l-grid { display: -ms-grid; display: grid; } /* Reset the margins since we no longer need them */ .l-grid--gutter-large { margin: initial; } .l-grid--gutter-large > .l-grid__item { margin: initial; }
}
/* Declares two columns 1 fraction each */
.l-grid--half-half { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
}
/* Declares a gutter of 1rem between grid items */
.l-grid--gutter-large { grid-gap: 1rem;
}
/* Center the content */
.l-center-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.l-full-height { min-height: 100vh;
}
.first-panel { background: #4dab6b; color: #fff;
}
.second-panel { background: #fff; color: #111;
}
.content { max-width: 300px;
}
.heading { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 2.5rem; line-height: 1.2; margin-bottom: 1rem;
}
.description { font-family: 'Raleway', sans-serif; font-weight: 400; font-size: 0.9rem; line-height: 1.5;
}
Grid - two columns with gutters - Script Codes
Grid - two columns with gutters - Script Codes
Home Page Home
Developer Chris Wright
Username chriswrightdesign
Uploaded July 12, 2022
Rating 3
Size 2,922 Kb
Views 56,672
Do you need developer help for Grid - two columns with gutters?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris Wright (chriswrightdesign) Script Codes
Name
SVG Noise over gradient Experiment
Flexbox responsive navigation
Macbook Air SVG
Inertia CSS
SVG iMac
Grid - More complex grids with span
SVG animate hamburger to cross
SVG Noise blended radial
CSS Responsive animated Accordion
Inverted shadow with fade
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!