Primer CSS Flexbox Grids Last Updated : 31 May, 2022 Comments Improve Suggest changes Like Article Like Report Primer CSS is a free open-source CSS framework that is built with the GitHub design system to provide support to the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is a highly reusable model. Flexbox grids are used to get responsive layouts. The flexbox grids are useful for keeping columns the same height, justifying content, and vertically aligning items. Flex utility classes are used on div containers and columns. Primer CSS Flexbox Grids classes: col-*: It defines the number of columns up to 12.d-flex: This class is used to set a block that lays out its content using the flexbox model.d-inline-flex: This class is used to set an inline element that lays out its content using the flexbox model.flex-justify-start: This class is used to justify all items to the left.flex-justify-end: This class is used to justify all items to the right.flex-justify-center: This class is used to justify items to the center of the container.flex-justify-between: This class is used to distribute items evenly. The first item is on the start line, the last item is on the end line.flex-justify-around: This class is used to distribute items evenly with equal space around them.flex-items-start: This class is used to align items to the start of the cross axis.flex-items-end: This class is used to align items to the end of the cross axis.flex-items-center: This class is used to align items to the center of the cross axis.flex-items-baseline: This class is used to align items along their baselines.flex-items-stretch: This class is used to stretch items from the start of the cross-axis to the end of the cross-axis vertically. Note: The above classes are used in combination for the desired result as per the application's need. Syntax: <div class="o-container"> <div class="col-* d-flex"> ... </div> <div class="col-* flex-justify-center flex-md-items-start"> ... </div> </div> Example: The following code demonstrates the Primer CSS flexbox grids by using flex utilities on containers and columns. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> <style> body { margin-left:20px; margin-right:20px; } </style> </head> <body> <div class="o-container" style="padding:1em;"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h4 class="font-bold"> Primer CSS Flexbox grids </h4></br> <div class="d-inline-flex flex-column flex-md-row flex-items-center flex-md-items-center"> <div class="col-2 d-flex flex-items-center flex-md-items-start"> <img class="width-full avatar mb-2 mb-md-0" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220520210735/geeksimage2-200x146.png" alt="gfg" /> </div> <div class="col-2 d-flex flex-items-center"> <img class="width-full avatar mb-2 mb-md-0" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220520210648/geeksimage-200x145.png" alt="gfg" /> </div> <div class="col-12 col-md-10 d-flex flex-column flex-justify-center flex-items-center flex-md-items-start pl-md-4"> <h1 class="text-normal">GFG</h1> <p class="h4 text-normal mb-2">Data structures</p> <a class="color-fg-muted text-small" href="#url"> https://www.geeksforgeeks.org/data-structures/ </a> </div> </div> </div> </body> </html> Output: Reference: https://primer.style/css/utilities/grid#flexbox-grids Comment More infoAdvertise with us Next Article Primer CSS Flexbox Grids G geetanjali16 Follow Improve Article Tags : Web Technologies CSS Primer-CSS Primer-CSS Utilities Similar Reads Primer CSS Flexbox Order Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Primer CSS Flexbox Order classes are 3 min read Primer CSS Flexbox Primer CSS is a free open-source CSS framework based on principles that set the foundation for basic design elements like spacing, typeface, and color. This rigorous approach ensures that our patterns are consistent and interoperable.Primer CSS Flexbox:Flex container: Flex Container is used to make 6 min read Primer CSS Flexbox Align Items Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Primer CSS Flexbox Align Items used t 3 min read Primer CSS Flexbox Bugs Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Flexbox is the flexible box that will 3 min read Primer CSS Flexbox Flex Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Primer CSS Flexbox Flex classes are u 3 min read Primer CSS Grid Primer CSS is a free open-source CSS framework that is built with the GitHub design system to provide support to the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure that our patterns ar 4 min read Primer CSS Float based Grid Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by 2 min read What is CSS flexbox ? CSS Flexible Layout Box, popularly known as Flexbox is a powerful one-dimensional layout model. It helps to lay, align and distribute items (children) efficiently inside a container (parent). Â Important Features:One-dimensional layout model: Flex is a one-dimensional layout model as it can only deal 15+ min read CSS Flexbox and Its Properties CSS Flexbox, or Flexible Box Layout, is the layout model designed to create flexible and responsive layout structures without using float or positioning. By applying display: flex to a parent container, it becomes a flex container, and its children become flex items. This allows control over the ite 3 min read Primer CSS Flexbox Justify Content Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Primer CSS Flexbox Justify Content cl 3 min read Like