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 ensures that our styles are consistent and interoperable with each other. It features a highly composable spacing scale, customizable typography, and meaningful colors. It is highly reusable and flexible and is created with GitHub’s design system.
The grid is 12 columns and is percentage-based. The number of columns a container spans can be adjusted across breakpoints for responsive layouts. Primer CSS Grid Containers provide us a functionality such that, container widths match our breakpoints and are available in different sizes.
Primer CSS Grid Container Classes:
- container-sm: This class is used to create a container width of a small size.
- container-md: This class is used to create a container width of medium size.
- container-lg: This class is used to create a container width of a large size.
- container-xl: This class is used to create a container width of the largest size.
Syntax:
<div class="container-md border"> ... </div>
Note: The syntax for the other classes is the same except for the name of the class which will change.
Example 1: The following example will demonstrate the use of the sm class and the md class to create a container of small size and medium size respectively.
HTML
<!DOCTYPE html> < html > < head > < title > Primer CSS Grid Containers </ title > < link rel = "stylesheet" href = "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </ head > < body > < div class = "text-left" > < h1 class = "color-fg-success" >w3wiki</ h1 > < h3 > Primer CSS Grid Containers </ h3 > </ div > < br > < div class = "container-sm border" > <!--sm--> Small Container Grid </ div > < div class = "container-sm border" > Small Container Grid </ div > < br > < div class = "container-md border" > <!--md--> Medium Container Grid </ div > < div class = "container-md border" > Medium Container Grid </ div > </ body > </ html > |
Output:
Example 2: The following example will demonstrate the use of the lg class and the xl class to create a container of large size and largest size respectively.
HTML
<!DOCTYPE html> < html > < head > < title > Primer CSS Grid Containers </ title > < link rel = "stylesheet" href = "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </ head > < body > < div class = "text-left" > < h1 class = "color-fg-success" >w3wiki</ h1 > < h3 > Primer CSS Grid Containers </ h3 > </ div > < br > < div class = "container-lg border" > <!--lg--> Large Container Grid </ div > < div class = "container-lg border" > Large Container Grid </ div > < br > < div class = "container-xl border" > <!--xl--> XL Container Grid </ div > < div class = "container-xl border" > XL Container Grid </ div > </ body > </ html > |
Output:
Reference: https://primer.style/css/utilities/grid#containers
Contact Us