Flexbox grid mark 2

Developer
Dave
Size
2,131 Kb
Views
20,240
  1. Flexbox grid mark 2 Previews
  2. Flexbox grid mark 2 HTML Codes
  3. Flexbox grid mark 2 CSS Codes

How do I make an flexbox grid mark 2?

What is a flexbox grid mark 2? How do you make a flexbox grid mark 2? This script and codes were developed by Dave on 17 September 2022, Saturday.

Flexbox grid mark 2 Previews
IQ Test

Flexbox grid mark 2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flexbox grid mark 2</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"> <div class="l-grid__item l-grid__item--6-col"> <p>Hello</p> </div> <div class="l-grid__item l-grid__item--6-col"> <p>Hello</p> </div>
</div>
<div class="l-grid"> <div class="l-grid__item l-grid__item--2-col"> <p>Hello</p> </div> <div class="l-grid__item l-grid__item--4-col"> <p>Hello</p> </div> <div class="l-grid__item l-grid__item--6-col"> <p>Hello</p> </div>
</div>
</body>
</html>

Flexbox grid mark 2 - Script Codes CSS Codes

* { box-sizing: border-box; margin: 0; padding: 0;
}
.l-grid { display: flex; flex-flow: wrap; margin-left: -1rem;
}
.l-grid__item { flex-basis: auto; padding-left: 1rem; width: 100%; margin-bottom: 1rem;
}
.l-grid__item--1-col { width: 8.3333%;
}
.l-grid__item--2-col { width: 16.6666%;
}
.l-grid__item--3-col { width: 25%;
}
.l-grid__item--4-col { width: 33.3333%;
}
.l-grid__item--5-col { width: 41.6666%;
}
.l-grid__item--6-col { width: 50%;
}
.l-grid__item--7-col { width: 58.3333%;
}
.l-grid__item--8-col { width: 66.6666%;
}
.l-grid__item--9-col { width: 75%;
}
.l-grid__item--10-col { width: 83.3333%;
}
.l-grid__item--11-col { width: 91.6666%;
}
.l-grid__item--12-col { width: 100%;
}
p { background-color: pink;
}
Flexbox grid mark 2 - Script Codes
Flexbox grid mark 2 - Script Codes
Home Page Home
Developer Dave
Username DaveOrDead
Uploaded September 17, 2022
Rating 3
Size 2,131 Kb
Views 20,240
Do you need developer help for Flexbox grid mark 2?

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
Password validation
Shell CSS lib
Callbacks
React Tic Tac Toe
Closures
Pogo map
Flexbox Grid
Javascript Binding
Colour Swatches
Inline-block grid
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!