Flexbox Grid

Developer
Kendrick Arnett
Size
9,167 Kb
Views
42,504
  1. Flexbox Grid Previews
  2. Flexbox Grid HTML Codes
  3. Flexbox Grid CSS Codes

How do I make an flexbox grid?

What is a flexbox grid? How do you make a flexbox grid? This script and codes were developed by Kendrick Arnett on 11 August 2022, Thursday.

Flexbox Grid Previews
IQ Test

Flexbox Grid - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flexbox Grid</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/jkopex.css'>
<link rel='stylesheet prefetch' href='css/zoyoro.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="grid fluid"> <div class="row xs-center"> <h1>Responsive Grid With Flexbox </h1> </div> <div class="row"> <div class="col xl-3 sm-6 xs-12"> <div class="box"></div> </div> <div class="col xl-3 sm-6 xs-12"> <div class="box"></div> </div> <div class="col xl-3 sm-6 xs-12"> <div class="box"></div> </div> <div class="col xl-3 sm-6 xs-12"> <div class="box"></div> </div> </div> <div class="row xs-around md-start xl-end"> <div class="col xs-2"> <div class="box"></div> </div> <div class="col xs-1"> <div class="box"></div> </div> <div class="col xs-1"> <div class="box"></div> </div> <div class="col xs-1"> <div class="box"></div> </div> </div>
</div>
</body>
</html>

Flexbox Grid - Script Codes CSS Codes

// Inspired by http://codepen.io/absolutholz/pen/dPQYzr. Presentation-specific styles are at http://codepen.io/kendrick/pen/JKopex.
$viewport-layouts: ( 'xs': (), 'sm': ('min-width': 34rem), 'md': ('min-width': 48rem), 'lg': ('min-width': 62rem), 'xl': ('min-width': 75rem)
);
$breakpoints: ( xs: 0rem, sm: 34rem, md: 48rem, lg: 62rem, xl: 75rem
);
$columns: 12;
$gutter-width: 1rem;
$half-gutter-width: $gutter-width / 2;
$gutter-compensation: -1 * $half-gutter-width;
@mixin row($reverse: false) { @include row-direction($reverse); box-sizing: border-box; display: flex; flex: 0 1 auto; flex-wrap: wrap; // margin-right: $gutter-compensation; // margin-left: $gutter-compensation;
}
@mixin row-direction($reverse: false) { @if ($reverse) { flex-direction: row-reverse; } @else { flex-direction: row; }
}
@mixin row-alignment-horizontal($alignment) { $justify: inherit; @if ($alignment == center) { $justify: center; } @elseif ($alignment == end) { $justify: flex-end; } @elseif ($alignment == start) { $justify: flex-start; } justify-content: $justify; text-align: $alignment;
}
@mixin row-alignment-vertical($alignment) { @if ($alignment == middle) { align-items: center; } @else if ($alignment == bottom) { align-items: flex-end; } @else { align-items: flex-start; }
}
@mixin row-spacing($spacing) { justify-content: $spacing;
}
@mixin column($reverse: false) { @include column-direction($reverse); box-sizing: border-box; display: flex; flex: 0 1 auto; flex-grow: 0; flex-shrink: 0; padding-right: $half-gutter-width; padding-left: $half-gutter-width;
}
@mixin column-direction($reverse: false) { @if ($reverse) { flex-direction: column-reverse; } @else { flex-direction: column; }
}
@mixin column-span($columns-to-span: $columns, $total-columns-in-row: $columns) { @if ($columns-to-span == auto) { flex-grow: 1; flex-basis: 0; max-width: 100%; } @else { $span-percentage: $columns-to-span / $total-columns-in-row; flex-basis: $span-percentage * 100%; max-width: $span-percentage * 100%; }
}
@mixin column-offset($columns-to-offset, $total-columns-in-row: $columns) { margin-left: ($columns-to-offset / $total-columns-in-row) * 100%;
}
@mixin column-order($position) { @if ($position == last) { $position: 9999; } @else if ($position == first) { $position: -9999; } order: $position;
}
.grid { margin-right: auto; margin-left: auto; &.fluid { width: inherit; }
}
.row { @include row;
}
.row.reverse { @include row-direction(true);
}
.col.reverse { @include column-direction($reverse: true);
}
@mixin example-viewport($key) { .col.#{$key} { $str: '&'; @for $i from 1 through $columns { $str: $str + ',' & + '-' + $i + ',' + & + '-offset-' + $i; } @at-root #{$str} { @include column; } & { @include column-span(auto); } @for $i from 1 through $columns { &-#{$i} { @include column-span($i); } &-offset-#{$i} { @include column-offset($i); } } } .row { &.#{$key}-start { @include row-alignment-horizontal(start); } &.#{$key}-center { @include row-alignment-horizontal(center); } &.#{$key}-end { @include row-alignment-horizontal(end); } &.#{$key}-top { @include row-alignment-vertical(top); } &.#{$key}-middle { @include row-alignment-vertical(middle); } &.#{$key}-bottom { @include row-alignment-vertical(bottom); } &.#{$key}-around { @include row-spacing(space-around); } &.#{$key}-between { @include row-spacing(space-between); } } .col { &.#{$key}-first { @include column-order(first); } &.#{$key}-last { @include column-order(last); } }
}
@each $key, $value in $breakpoints { @if ($key == xs) { @include example-viewport($key); } @else { $min-width: '>=' + $value; @include media($min-width) { @include example-viewport($key); .grid { width: $min-width; } } }
}
Flexbox Grid - Script Codes
Flexbox Grid - Script Codes
Home Page Home
Developer Kendrick Arnett
Username kendrick
Uploaded August 11, 2022
Rating 3
Size 9,167 Kb
Views 42,504
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!

Kendrick Arnett (kendrick) Script Codes
Name
Media Queries via include-media
Pulse for Skeleton Screens
A Pen by Kendrick Arnett
Chunky Toggles
A11y Product Tile
Linkish Buttons
Grid With 2-Up Skyscrapers
SVG Social Icons
Reasonably Shadowed Button
Lazy Image Loading via ScrollMagic
Create amazing art & images 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!