Flexbox Grid

Developer
Dave
Size
3,946 Kb
Views
14,168
  1. Flexbox Grid Previews
  2. Flexbox Grid HTML Codes
  3. Flexbox Grid CSS Codes

How do I make an flexbox grid?

Work in progress flexbox grid. Credits due to both Inuit CSS for some of the naming conventions and Suit CSS for influence taken from their flexbox grid . What is a flexbox grid? How do you make a flexbox grid? This script and codes were developed by Dave on 17 September 2022, Saturday.

Flexbox Grid Previews
IQ Test

Flexbox Grid - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flexbox Grid</title> <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="l-grid l-grid--three-col"> <div class="l-grid__item"> <div class="c-card"> <p>Cell 1</p> </div> </div> <div class="l-grid__item l-grid__item--half"> <div class="c-card"> <p>Cell 2</p> </div> </div> <div class="l-grid__item l-grid__item--half"> <div class="c-card"> <p>Cell 3</p> </div> </div> <div class="l-grid__item l-grid__item--half"> <div class="c-card"> <p>Cell 4</p> </div> </div> <div class="l-grid__item l-grid__item--half"> <div class="c-card"> <p>Cell 5</p> </div> </div> <div class="l-grid__item l-grid__item--half"> <div class="c-card"> <p>Cell 6</p> </div> </div>
</div>
<!-- .l-grid -->
</body>
</html>

Flexbox Grid - Script Codes CSS Codes

/*
* Reset - just box-sizing to play nice :)
*/
html { box-sizing: border-box;
}
*,
*::before,
*::after,
input[type="search"] { box-sizing: inherit;
}
/*
* Card Component
* placeholder component just to demo content inside grid
*/
.c-card { background-color: pink; padding: 10px;
}
/*
* Settings
*/
/* Base =======================================*/
/** * Grid container * 1. to counter padding-right on cols * 2. Colour just for display purposes - should be unstyled
*/
.l-grid { display: flex; flex-flow: row wrap; margin: 0 0 0 -10px; background-color: red;
}
/** * Grid Item * All content must be contained within child `grid__item` elements. * 100% width by default - mobile first * * 1. Allows use of widths * 2. Colour just for display purposes - should be unstyled */
.l-grid__item { box-sizing: inherit; padding: 0 0 10px 10px; flex-basis: auto; width: 100%; background-color: yellow;
}
/** * Modifier: Wide gutters */
.l-grid--wide { margin-left: -20px;
}
.l-grid--wide .l-grid__item { padding: 0 0 20px 20px;
}
/** * Modifier: narrow gutters */
.l-grid--narrow { margin-left: -5px;
}
.l-grid--narrow > .l-grid__item { padding: 0 0 5px 5px;
}
/** * Modifier: Full (No gutters) */
.l-grid--full { margin: 0;
}
.l-grid--full > .l-grid__item { padding: 0;
}
/** * Modifier: column sizing - Default set at parent level * 1. To reset padding to 0 on last row of grid */
.l-grid--two-col > .l-grid__item { width: 50%;
}
.l-grid--two-col > .l-grid__item:nth-last-child(-n+2) { padding-bottom: 0;
}
.l-grid--three-col > .l-grid__item { width: 33.333%;
}
.l-grid--three-col > .l-grid__item:nth-last-child(-n+3) { padding-bottom: 0;
}
.l-grid--four-col > .l-grid__item { width: 25%;
}
.l-grid--four-col > .l-grid__item:nth-last-child(-n+4) { padding-bottom: 0;
}
/** * Modifier: center align all grid items */
.l-grid--align-center { justify-content: center;
}
/** * Modifier: right align all grid items */
.l-grid--align-right { justify-content: flex-end;
}
/** * Modifier: middle-align grid items */
.l-grid--align-middle { align-items: center;
}
/** * Modifier: bottom-align grid items */
.l-grid--align-bottom { align-items: flex-end;
}
/** * Modifier: Space between */
.l-grid--space-between { justify-content: space-between; flex-flow: row;
}
.l-grid--space-between > .l-grid__item { flex: 1 1 0%; flex-basis: none;
}
/** * Modifier: allow items to equal distribute width * * 1. Provide all values to avoid IE10 bug with shorthand flex - * https://git.io/vllC7 * Use `0%` to avoid bug in IE10/11 with unitless flex basis - * https://git.io/vllWx */
.l-grid--fit > .l-grid__item { flex: 1 1 0%; flex-basis: none;
}
/** * Modifier: all items match height of tallest item in a row */
.l-grid--equal-height > .l-grid__item { display: flex;
}
/** * Modifier: horizontally center one unit * Set a specific unit to be horizontally centered. Doesn't affect * any other units. Can still contain a child `grid` object. */
.l-grid__item--center { margin: 0 auto;
}
/** * Generic width modifiers */
.u-width--half { width: 50%;
}
.u-width--third { width: 33.333%;
}
.u-width--quarter { width: 25%;
}
.u-width--fifth { width: 20%;
}
Flexbox Grid - Script Codes
Flexbox Grid - Script Codes
Home Page Home
Developer Dave
Username DaveOrDead
Uploaded September 17, 2022
Rating 3
Size 3,946 Kb
Views 14,168
Do you need developer help for Flexbox Grid?

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!

Dave (DaveOrDead) Script Codes
Name
Flexbox Grid - equal height
Character Gen - React
React Tic Tac Toe
Closures
Validation fun
Webpack config
Callbacks 2 - Passing arguments
Colour Swatches
Shell CSS lib
Callbacks
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!