Skip to content
Related Articles

Related Articles

Primer CSS Responsive Container Padding

View Discussion
Improve Article
Save Article
  • Last Updated : 14 May, 2022
View Discussion
Improve Article
Save Article

Primer CSS is a free open-source CSS framework based on concepts that set the foundation for basic design components such as space, font, and color. Because of their systematic structure, these patterns are both stable and interoperable. Its CSS approach is informed by Object-Oriented CSS concepts, core CSS, and BEM architecture. It’s incredibly adaptable and reusable. It was made with the help of the GitHub design system. 

The Padding can be used to add the space around an element’s inner contents within any border that surrounds it in CSS. The global spacing scale is used in Primer CSS to determine how much padding will be added, ensuring that the horizontal and vertical padding is uniform. We may create different layouts with the same styles by using these tools since it helps us reduce the quantity of custom CSS that has the same characteristics. The Responsive Container Padding Utility is a feature that allows us to add some predefined amount of padding to a container with the change of breakpoints.

Primer CSS Responsive Container Padding Utility Classes:

  • p-responsive: This class can be used to add padding to either side of the element, which intends to be used with different container styles.
    • 0 to sm sized screens: It will add element padding of $spacer-3 which is equivalent to 16px.
    • sm to lg sized screens: It will add element padding of $spacer-6 which is equivalent to 40px.
    • lg and wider sized screens: It will add element padding of $spacer-3 which is equivalent to 16px.

Adding these classes to the container is equivalent to adding .px-3 .px-sm-6 .px-lg-3 to it.

Syntax:

<div class="p-responsive">Content...</div>

Example 1: This example illustrates the implementation of  Responsive Container Padding in Primer CSS. Here, we have used the p-responsive to a div container.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" 
          rel="stylesheet" />
    <title>
        Primer CSS Responsive Container Padding
    </title>
</head>
  
<body>
    <div class="m-4">
        <h1 class="color-fg-success">GeeksforGeeks</h1>
        <h3>Primer CSS Responsive Container Padding</h3>
    </div>
    <div class="p-responsive color-bg-open-emphasis 
        d-inline-block m-3">
        <div class="color-bg-inset color-fg-open p-1">
            Hello Geeks my Padding changes with custom
            values when my size changes!!
        </div>
    </div>
</body>
</html>


Output:

 

Example 2: In this example, we have implemented 2 inline containers having the .p-responsive class that shows that by adjusting the screen width, both the containers also adjust their size according to the screen width.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" 
          rel="stylesheet" />
    <title>
        Primer CSS Responsive Container Padding
    </title>
</head>
  
<body>
    <div class="m-4">
        <h1 class="color-fg-success">GeeksforGeeks</h1>
        <h3>Primer CSS Responsive Container Padding</h3>
    </div>
    <div class="p-responsive color-bg-open-emphasis 
        d-inline-block m-3">
        <div class="color-bg-inset color-fg-open p-1">
            First Container
        </div>
    </div>
    <div class="p-responsive color-bg-success-emphasis 
        d-inline-block m-3">
        <div class="color-bg-inset color-fg-open p-1">
            Second Container
        </div>
    </div>
</body>
</html>


Output:

 

Reference: https://primer.style/css/utilities/padding#responsive-container-padding


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!