Primer CSS Inline block grids Last Updated : 02 Jun, 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. Primer CSS grid system works with various layout utilities for different outputs. Many columns can be adjusted across breakpoints in a container for getting responsive results. Primer CSS inline-block grids class: d-inline-block: This class is used to set an inline-block grid along with Primer CSS grid column width classes. Syntax: <div> <div class="d-inline-block border col-2"> ... </div> <div class="d-inline-block border col-2"> ... </div> </div> Example 1: The following code demonstrates the column widths using the d-inline-block class in the HTML div element. 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 Inline block Grid </h4> <br> <div class="col-4 d-inline-block border color-bg-subtle"> box 0 </div> <div class="col-4 d-inline-block border color-bg-subtle"> box 1 </div> <div class="col-4 d-inline-block border color-bg-subtle"> box 2 </div> <div class="col-4 d-inline-block border color-bg-subtle"> box 3 </div> </div> </body> </html> Output: Example 2: The following code shows that the developer can use column widths and other utilities on HTML list elements as per the application need. 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 Inline block Grid on lists </h4> <br> <ul class="list-style-none"> <li class="d-inline-block border col-2 p-2"> list 1 </li> <li class="d-inline-block border col-2 p-2"> list 2 </li> <li class="d-inline-block border col-2 p-2"> list 3 </li> <li class="d-inline-block border col-2 p-2"> list 4 </li> <li class="d-inline-block border col-2 p-2"> list 5 </li> <li class="d-inline-block border col-2 p-2"> list 6 </li> <li class="d-inline-block border col-2 p-2"> list 7 </li> <li class="d-inline-block border col-2 p-2"> list 8 </li> </ul> </div> </body> </html> Output: Reference: https://primer.style/css/utilities/grid#inline-block-grids Comment More infoAdvertise with us Next Article Primer CSS Inline block grids G geetanjali16 Follow Improve Article Tags : Web Technologies CSS Primer-CSS Primer-CSS Utilities Similar Reads Primer CSS Grid Nesting 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 CSS Inline-block The display: inline-block property allows you to apply both width and height to an element, similar to how block elements work. Unlike the display: inline property, which only respects left and right margins/paddings, display: inline-block respects the element's full margins and paddings (including 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 Gutters 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 3 min read Primer CSS Grid Offset Columns 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 Pure CSS Grids on Mobile Pure CSS is a free and open-source CSS framework. It is a set of resources for building dynamic websites and online applications. This was created by Yahoo and is used to create websites that load more quickly, have a better user experience, and look better. It effectively takes the place of Bootstr 4 min read Primer CSS Inline Styles 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 Primer CSS Grid Containers 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. It is a system that assists us to build consistent user experiences efficiently with enough flexibility. This systematic approach e 2 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 Primer CSS Flexbox Grids 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 ste 3 min read Like