Educational

Category: CSS

  • min block size Property

    CSS min-block-size property sets the minimum block size of an element. The direction of the block is determined by the writing-mode property. The property has no effect, if the content fits well within the block.

    Syntax

    min-block-size: auto | length | percentage | initial | inherit;

    Property Values

    ValueDescription
    autoNo height limit is set with this value. Default.
    lengthIt sets the min-block-size of the element using length units (e.g. px, em, rem etc.)
    percentageIt sets the min-block-size of the element using percentage value relative to the size of the containing element.
    initialIt sets the property to its default value.
    inheritIt inherits the property from the parent element.

    Examples of CSS Min Block Size Property

    The following examples explain the min-block-size property with different values.

    Min Block Size Property with Auto Value

    To not set any specific limit on the block-size of an element, we use the auto value. The size of the block depends on the length of the content. This is shown in the following example.

    Example

    <!DOCTYPE html><html><head><style>

      .container {
     background-color: lightgreen;
     min-block-size: auto;
  }
       </style></head><body><h2>

      CSS min-block-size property
       </h2><h4>

      min-block-size: auto
       </h4><div class="container"><p>

         TutorialsPoint offers comprehensive online 
     tutorials across various subjects, including 
     programming, web development, and data science. 
     It provides accessible, step-by-step guides, 
     practical examples, and interactive learning 
     resources for learners of all levels.
  &lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    Min Block Size Property with Length Values
    




    To set the minimum size of the block of an element, we can specify the size using length units (e.g. px, em, rem etc.). The specified size will be applied to the block. If the content is greater than the size of the block, the element will grow to accomodate the content. This is shown in the following example.
    




    Example
    




    <!DOCTYPE html><html><head><style>

      .container {
     background-color: lightgreen;
  }
    

      .size1 {
     min-block-size: 90px;
  }
    

      .size2 {
     min-block-size: 4.5em;
  }
       </style></head><body><h2>

      CSS min-block-size property
       </h2><h4>

      min-block-size: 90px
       </h4><div class="container size1"><p>

         TutorialsPoint offers comprehensive online 
     tutorials across various subjects, including 
     programming, web development, and data science. 
     It provides accessible, step-by-step guides, 
     practical examples, and interactive learning 
     resources for learners of all levels.
  &lt;/p&gt;&lt;/div&gt;&lt;br/&gt;&lt;h4&gt;
  min-block-size: 4.5em
       </h4><div class="container size2"><p>

         TutorialsPoint offers comprehensive online 
     tutorials across various subjects, including 
     programming, web development, and data science. 
     It provides accessible, step-by-step guides, 
     practical examples, and interactive learning 
     resources for learners of all levels.
  &lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    Min Block Size Property with Percentage Values
    




    To set the minimum size of the block of an element, we can specify the size using percentage value (e.g. 10%) relative to the size of the containing element. The specified size will be applied to the block. If the content is greater than the size of the block, the element will grow to accomodate the content. This is shown in the following example.
    




    Example
    




    <!DOCTYPE html><html><head><style>

      .outer-container {
     height: 100px;
  }
    

      .container {
     background-color: lightgreen;
  }
    

      .size1 {
     min-block-size: 58%;
  }
    

      .size2 {
     min-block-size: 75%;
  }
       </style></head><body><h2>

      CSS min-block-size property
       </h2><h4>

      min-block-size: 58% (of the size 
  of the containing element)
       </h4><div class="outer-container"><div class="container size1"><p>

            TutorialsPoint offers comprehensive online 
        tutorials across various subjects, including 
        programming, web development, and data science. 
        It provides accessible, step-by-step guides, 
        practical examples, and interactive learning 
        resources for learners of all levels.
     &lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;br/&gt;&lt;h4&gt;
  min-block-size: 75% (of the size 
  of the containing element)
       </h4><div class="outer-container"><div class="container size2"><p>

            TutorialsPoint offers comprehensive online 
        tutorials across various subjects, including 
        programming, web development, and data science. 
        It provides accessible, step-by-step guides, 
        practical examples, and interactive learning 
        resources for learners of all levels.
     &lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    Min Block Size Property with Writing Mode
    




    The min-block-size property can be used in combination with the writing-mode property which determines the block direction. In horizontal-mode, the block-size grows from top to bottom. In vertical-mode, the block-size grows from left to right. This is shown in the following example.
    




    Example
    




    <!DOCTYPE html><html><head><style>

      .outer-container {
     height: 150px;
  }
    

      .container {
     background-color: lightgreen;
     min-block-size: 40%;
  }
    

      .horizontal {
     writing-mode: horizontal-lr;
  }
    

      .vertical {
     writing-mode: vertical-rl;
  }
       </style></head><body><h2>

      CSS min-block-size property
       </h2><h4>

      min-block-size: 40% (of the size of the 
  containing element); writing-mode: horizontal-lr;
       </h4><div class="outer-container"><div class="container horizontal"><p>

            TutorialsPoint offers comprehensive online 
        tutorials across various subjects, including 
        programming, web development, and data science. 
        It provides accessible, step-by-step guides, 
        practical examples, and interactive learning 
        resources for learners of all levels.
     &lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;br/&gt;&lt;h4&gt;
  min-block-size: 40% (of the size of the 
  containing element); writing-mode: vertical-rl;
       </h4><div class="outer-container"><div class="container vertical"><p>

            TutorialsPoint offers comprehensive online 
        tutorials across various subjects, including 
        programming, web development, and data science. 
        It provides accessible, step-by-step guides, 
        practical examples, and interactive learning 
        resources for learners of all levels.
     &lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

  • max block size Property

    CSS max-block-size property sets the maximum block size of an element. The direction of the block is determined by the writing-mode property. The property has no effect, if the content fits well within the block.

    Syntax

    max-block-size: auto | length | percentage | initial | inherit;

    Property Values

    ValueDescription
    autoNo height limit is set with this value. Default.
    lengthIt sets the max-block-size of the element using length units (e.g. px, em, rem etc.)
    percentageIt sets the max-block-size of the element using percentage value relative to the size of the containing element.
    initialIt sets the property to its default value.
    inheritIt inherits the property from the parent element.

    Examples of CSS Max Block Size Property

    The following examples explain the max-block-size property with different values.

    Max Block Size Property with Auto Value

    To not set any specific limit on the block-size of an element, we use the auto value. The size of the block depends on the length of the content. This is shown in the following example.

    Example

    <!DOCTYPE html><html><head><style>

      .container {
     background-color: lightgreen;
     max-block-size: auto;
  }
       </style></head><body><h2>

      CSS max-block-size property
       </h2><h4>

      max-block-size: auto
       </h4><div class="container"><p>

         TutorialsPoint offers comprehensive online 
     tutorials across various subjects, including 
  &lt;/p&gt;&lt;p&gt;
     programming, web development, and data science. 
     It provides accessible, step-by-step guides, 
  &lt;/p&gt;&lt;p&gt;
     practical examples, and interactive learning 
     resources for learners of all levels.
  &lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    Max Block Size Property with Length Values
    




    To set the size of the block of an element, we can specify the size using length units (e.g. px, em, rem etc.). The specified size will be applied to the block. If the content is greater than the size of the block, it will overflow. This is shown in the following example.
    




    Example
    




    <!DOCTYPE html><html><head><style>

      .container {
     background-color: lightgreen;
  }
    

      .size1 {
     max-block-size: 85px;
  }
    

      .size2 {
     max-block-size: 4.5em;
  }
       </style></head><body><h2>

      CSS max-block-size property
       </h2><h4>

      max-block-size: 85px
       </h4><div class="container size1"><p>

         TutorialsPoint offers comprehensive online 
     tutorials across various subjects, including 
  &lt;/p&gt;&lt;p&gt;
     programming, web development, and data science. 
     It provides accessible, step-by-step guides, 
  &lt;/p&gt;&lt;p&gt;
     practical examples, and interactive learning 
     resources for learners of all levels.
  &lt;/p&gt;&lt;/div&gt;&lt;br/&gt;&lt;h4&gt;
  max-block-size: 4.5em
       </h4><div class="container size2"><p>

         TutorialsPoint offers comprehensive online 
     tutorials across various subjects, including 
  &lt;/p&gt;&lt;p&gt;
     programming, web development, and data science. 
     It provides accessible, step-by-step guides, 
  &lt;/p&gt;&lt;p&gt;
     practical examples, and interactive learning 
     resources for learners of all levels.
  &lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    Max Block Size Property with Percentage Values
    




    To set the size of the block of an element, we can specify the size using percentage value (e.g. 10%) relative to the size of the containing element. The specified size will be applied to the block. If the content is greater than the size of the block, it will overflow. This is shown in the following example.
    




    Example
    




    <!DOCTYPE html><html><head><style>

      .outer-container {
     height: 100px;
  }
    

      .container {
     background-color: lightgreen;
  }
    

      .size1 {
     max-block-size: 55%;
  }
    

      .size2 {
     max-block-size: 75%;
  }
       </style></head><body><h2>

      CSS max-block-size property
       </h2><h4>

      max-block-size: 55% (of the size of 
  the containing element)
       </h4><div class="outer-container"><div class="container size1"><p>

            TutorialsPoint offers comprehensive online 
        tutorials across various subjects, including 
     &lt;/p&gt;&lt;p&gt;
        programming, web development, and data science. 
        It provides accessible, step-by-step guides, 
     &lt;/p&gt;&lt;p&gt;
        practical examples, and interactive learning 
        resources for learners of all levels.
     &lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;br/&gt;&lt;h4&gt;
  max-block-size: 75% (of the size of 
  the containing element)
       </h4><div class="outer-container"><div class="container size2"><p>

            TutorialsPoint offers comprehensive online 
        tutorials across various subjects, including 
     &lt;/p&gt;&lt;p&gt;
        programming, web development, and data science. 
        It provides accessible, step-by-step guides, 
     &lt;/p&gt;&lt;p&gt;
        practical examples, and interactive learning 
        resources for learners of all levels.
     &lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    Max Block Size Property with Writing Mode
    




    The max-block-size property can be used in combination with the writing-mode property which determines the block direction. In horizontal-mode, the block-size grows from top to bottom. In vertical-mode, the block-size grows from left to right. This is shown in the following example.
    




    Example
    




    <!DOCTYPE html><html><head><style>

      .outer-container {
     height: 150px;
  }
    

      .container {
     background-color: lightgreen;
     max-block-size: 55%;
  }
    

      .horizontal {
     writing-mode: horizontal-lr;
  }
    

      .vertical {
     writing-mode: vertical-rl;
  }
       </style></head><body><h2>

      CSS max-block-size property
       </h2><h4>

      max-block-size: 55% (of the size of the 
  containing element); writing-mode: horizontal-lr;
       </h4><div class="outer-container"><div class="container horizontal"><p>

            TutorialsPoint offers comprehensive online 
        tutorials across various subjects, including 
     &lt;/p&gt;&lt;p&gt;
        programming, web development, and data science. 
        It provides accessible, step-by-step guides, 
     &lt;/p&gt;&lt;p&gt;
        practical examples, and interactive learning 
        resources for learners of all levels.
     &lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;br/&gt;&lt;h4&gt;
  max-block-size: 55% (of the size of the containing 
  element); writing-mode: vertical-rl;
       </h4><div class="outer-container"><div class="container vertical"><p>

            TutorialsPoint offers comprehensive online 
        tutorials across various subjects, including 
     &lt;/p&gt;&lt;p&gt;
        programming, web development, and data science. 
        It provides accessible, step-by-step guides, 
     &lt;/p&gt;&lt;p&gt;
        practical examples, and interactive learning 
        resources for learners of all levels.
     &lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

  • place self Property

    CSS place-self is a shorthand property that aligns the individual items in both block and inline directions simultaneously, similar to properties like align-self and justify-self in layout systems like Grid or Flexbox. The first value is used if the second value is not set.

    This property is a shorthand for the following CSS properties:

    • align-self
    • justify-self

    Possible Values

    • auto − Aligns the item based on the parent’s align-self value.
    • normal− Based on the layout mode, the effect of normal keyword changes:
      • Behaves like start on replaced absolutely-positioned boxes, and as stretch in all other absolutely-positioned boxes, when the layout is absolutely-positioned.
      • Behaves like stretch in static position of absolutely-positioned layouts.
      • Behaves like stretch for flex items.
      • Behaves similar to stretch for grid items, except for the boxes which have an aspect ratio or an intrinsic size where it behaves like start.
      • Does not apply to block-level boxes , and to the table cells.
    • self-start− Items are aligned to the edge of the alignment container corresponding to the start side of the item, in the cross-axis.
    • self-end − Items are aligned to the edge of the alignment container corresponding to the end side of the item, in the cross-axis.
    • flex-start − Aligns the cross-start margin edge of the flex item with the cross-start edge of the line.
    • flex-end− Aligns the cross-end margin edge of the flex item with the cross-end edge of the line.
    • center− Margins of flex-item box is centered within the line on the cross-axis. When the cross-size of an element is larger than the container, the content overflows equally in both directions.
    • baseline, first baseline, last baseline −
      • First baseline, and last baseline are synonym to baseline. First and last refer to the line boxes within the flex items.
      • These values specify the involvment of first- or last-baseline alignment in the alignment of the content.
      • start is the fallback alignment for first-baseline and end for last-baseline.
    • stretch − When the combined size of the items along with the cross-axis is less than the size of the container, and the item is sized as auto, its size is increased equally, maintaining the values of max-height / max-width.

    Applies To

    Block-level boxes, absolutely-positioned boxes, and grid items.

    Syntax

    Keyword Values

    place-self: auto center;
place-self: normal start;

    Positional Alignment

    place-self: center normal;
place-self: start auto;
place-self: end normal;
place-self: self-start auto;
place-self: self-end normal;
place-self: flex-start auto;
place-self: flex-end normal;

    Baseline Alignment

    place-self: baseline normal;
place-self: first baseline auto;
place-self: last baseline normal;
place-self: stretch auto;

    CSS place-self – normal start Value

    The following example demonstrates the place-self: normal start property aligns Item 2 to the start of its grid cell −

    <html><head><style>
   .container {

      background-color: red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 100px;
  grid-gap: 10px;
  margin: 20px;
  width: 300px;
       }
   .container > div {

      background-color: greenyellow;
  border: 3px solid blue;
  text-align: center;
  margin: 5px;
  width: 60px;
  height: 50px;
       }
   .item2 {

      place-self: normal start;
       }
</style></head><body><div class="container"><div>Item 1</div><div class="item2">Item 2</div><div>Item 3</div><div>Item 4</div></div></body></html>

    CSS place-self – auto center Value

    The following example demonstrates the place-self: auto center property aligns Item 2 at the center of its grid cell −

    <html><head><style>
   .container {

      background-color: red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 100px;
  grid-gap: 10px;
  margin: 20px;
  width: 300px;
       }
   .container > div {

      background-color: greenyellow;
  border: 3px solid blue;
  text-align: center;
  margin: 5px;
  width: 60px;
  height: 50px;
       }
   .item2 {

      place-self: auto center;
       }
</style></head><body><div class="container"><div>Item 1</div><div class="item2">Item 2</div><div>Item 3</div><div>Item 4</div></div></body></html>

    CSS place-self – center normal Value

    The following example demonstrates the place-self: center normal property aligns Item 2 at the center horizontally and vertically of its grid cell −

    <html><head><style>
   .container {

      background-color: red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 100px;
  grid-gap: 10px;
  margin: 20px;
  width: 300px;
       }
   .container > div {

      background-color: greenyellow;
  border: 3px solid blue;
  text-align: center;
  margin: 5px;
  width: 60px;
  height: 50px;
       }
   .item2 {

      place-self: center normal;
       }
</style></head><body><div class="container"><div>Item 1</div><div class="item2">Item 2</div><div>Item 3</div><div>Item 4</div></div></body></html>

    CSS place-self – end normal Value

    The following example demonstrates the place-self: end normal property aligns Item 2 on the right edge of its grid cell vertically and horizontally to the top edge of its grid cell −

    <html><head><style>
   .container {

      background-color: red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 100px;
  grid-gap: 10px;
  margin: 20px;
  width: 300px;
       }
   .container > div {

      background-color: greenyellow;
  border: 3px solid blue;
  text-align: center;
  margin: 5px;
  width: 60px;
  height: 50px;
       }
   .item2 {

      place-self: end normal;
       }
</style></head><body><div class="container"><div>Item 1</div><div class="item2">Item 2</div><div>Item 3</div><div>Item 4</div></div></body></html>

    CSS place-self – start auto Value

    The following example demonstrates the place-self: start auto property aligns Item 2 to the start of its grid cell −

    <html><head><style>
   .container {

      background-color: red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 100px;
  grid-gap: 10px;
  margin: 20px;
  width: 300px;
       }
   .container > div {

      background-color: greenyellow;
  border: 3px solid blue;
  text-align: center;
  margin: 5px;
  width: 60px;
  height: 50px;
       }
   .item2 {

      place-self: start auto;
       }
</style></head><body><div class="container"><div>Item 1</div><div class="item2">Item 2</div><div>Item 3</div><div>Item 4</div></div></body></html>

    CSS place-self – self-start auto Value

    The following example demonstrates the place-self: self-start auto property positioned Item 2 at the start of the row vertically and automatically in the horizontal direction −

    <html><head><style>
   .container {

      background-color: red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 100px;
  grid-gap: 10px;
  margin: 20px;
  width: 300px;
       }
   .container > div {

      background-color: greenyellow;
  border: 3px solid blue;
  text-align: center;
  margin: 5px;
  width: 60px;
  height: 50px;
       }
   .item2 {

      place-self: self-start auto;
       }
</style></head><body><div class="container"><div>Item 1</div><div class="item2">Item 2</div><div>Item 3</div><div>Item 4</div></div></body></html>

    CSS place-self – self-end normal Value

    The following example demonstrates the place-self: self-end normal property aligns Item 2 to the bottom vertically and horizontally to the start of its grid cell −

    <html><head><style>
   .container {

      background-color: red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 100px;
  grid-gap: 10px;
  margin: 20px;
  width: 300px;
       }
   .container > div {

      background-color: greenyellow;
  border: 3px solid blue;
  text-align: center;
  margin: 5px;
  width: 60px;
  height: 50px;
       }
   .item2 {

      place-self: self-end normal;
       }
</style></head><body><div class="container"><div>Item 1</div><div class="item2">Item 2</div><div>Item 3</div><div>Item 4</div></div></body></html>

    CSS place-self – flex-start auto Value

    The following example demonstrates the place-self: flex-start auto property aligns Item 2 to the left edge vertically and horizontally to the top of its grid cell −

    <html><head><style>
   .container {

      background-color: red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 100px;
  grid-gap: 10px;
  margin: 20px;
  width: 300px;
       }
   .container > div {

      background-color: greenyellow;
  border: 3px solid blue;
  text-align: center;
  margin: 5px;
  width: 60px;
  height: 50px;
       }
   .item2 {

      place-self: flex-start auto;
       }
</style></head><body><div class="container"><div>Item 1</div><div class="item2">Item 2</div><div>Item 3</div><div>Item 4</div></div></body></html>

    CSS place-self – flex-end normal Value

    The following example demonstrates the place-self: flex-end normal property aligns Item 2 to the right edge of its grid cell −

    <html><head><style>
   .container {

      background-color: red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 100px;
  grid-gap: 10px;
  margin: 20px;
  width: 300px;
       }
   .container > div {

      background-color: greenyellow;
  border: 3px solid blue;
  text-align: center;
  margin: 5px;
  width: 60px;
  height: 50px;
       }
   .item2 {

      place-self: flex-end normal;
       }
</style></head><body><div class="container"><div>Item 1</div><div class="item2">Item 2</div><div>Item 3</div><div>Item 4</div></div></body></html>

    CSS place-self – baseline normal Value

    The following example demonstrates the place-self: baseline normal property aligns Item 2 to the baseline of its grid cell −

    <html><head><style>
   .container {

      background-color: red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 100px;
  grid-gap: 10px;
  margin: 20px;
  width: 300px;
       }
   .container > div {

      background-color: greenyellow;
  border: 3px solid blue;
  text-align: center;
  margin: 5px;
  width: 60px;
  height: 50px;
       }
   .item2 {

      place-self: baseline normal;
       }
</style></head><body><div class="container"><div>Item 1</div><div class="item2">Item 2</div><div>Item 3</div><div>Item 4</div></div></body></html>

    CSS place-self – last baseline normal Value

    The following example demonstrates the place-self: last baseline normal property aligns Item 2 to the baseline of the last row of its grid cell −

    <html><head><style>
   .container {

      background-color: red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 100px;
  grid-gap: 10px;
  margin: 20px;
  width: 300px;
       }
   .container > div {

      background-color: greenyellow;
  border: 3px solid blue;
  text-align: center;
  margin: 5px;
  width: 60px;
  height: 50px;
       }
   .item2 {

      place-self: last baseline normal;
       }
</style></head><body><div class="container"><div>Item 1</div><div class="item2">Item 2</div><div>Item 3</div><div>Item 4</div></div></body></html>

    CSS place-self – stretch auto Value

    The following example demonstrates the place-self: stretch auto property stretches Item 2 horizontally to fill the available space in its grid cell −

    <html><head><style>
   .container {

      background-color: red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 100px;
  grid-gap: 10px;
  margin: 20px;
  width: 300px;
       }
   .container > div {

      background-color: greenyellow;
  border: 3px solid blue;
  text-align: center;
  margin: 5px;
  width: 60px;
  min-height: 50px;
       }
   .item2 {

      place-self: stretch auto;
       }
</style></head><body><div class="container"><div>Item 1</div><div class="item2">Item 2</div><div>Item 3</div><div>Item 4</div></div></body></html>

  • place items Property

    CSS place-items is a shorthand property used in CSS Grid Layout to set both the align-items and justify-items properties in a single declaration. It allows you to align and justify grid items within the grid container along both the block (column) and inline (row) axes simultaneously

    This property is a shorthand for the following CSS properties:

    • align-items
    • justify-items

    Possible Values

    • A single align-items value aligns in both the block and inline directions.
    • An align-items value sets the block direction alignment, followed by justify-items, which specifies inline alignment.

    Applies To

    All elements.

    Syntax

    Keyword Values

    place-items: center;
place-items: normal start;

    Positional Alignment

    place-items: center normal;
place-items: start legacy;
place-items: end normal;
place-items: self-start legacy;
place-items: self-end normal;
place-items: flex-start legacy;
place-items: flex-end normal;

    Baseline Alignment

    place-items: baseline normal;
place-items: first baseline legacy;
place-items: last baseline normal;
place-items: stretch legacy;

    CSS place-items – Placing Items in a Grid Container

    The following example demonstrates the different behavior of the place-items property in the grid layout −

    Open Compiler

    <html><head><style>
   div > div {

      box-sizing: border-box;
  border: 2px solid blue;
       }
   .row {

      margin-bottom: 20px;
       }
   select {

      padding: 2px;
  background-color: yellow;
  border-radius: 10px;
  color: blue;
       }
   #grid-container {

      height: 400px;
  width: 350px;
  place-items: start;
  background-color: red;
  display: grid;
  grid-template-columns: repeat(3, 100px);
       }
   #grid-container > div {

      width: 60px;
  min-height: 60px;
  padding: 5px;
  margin: 5px;
       }
   .gridItem1 {

      background-color: greenyellow;
       }
   .gridItem2 {

      background-color: violet;
       }
</style></head><body><div class="row"><label for="place-items-values">place-items: </label><select id="place-items-values"><option value="start">start</option><option value="center">center</option><option value="end">end</option><option value="stretch">stretch</option><option value="center normal">center normal</option><option value="normal start">normal start</option><option value="center normal">center normal</option><option value="start legacy">start legacy</option><option value="end normal">end normal</option><option value="self-start legacy">self-start legacy</option><option value="self-end normal">self-end normal</option><option value="flex-start legacy">flex-start legacy</option><option value="flex-end normal">flex-end normal</option><option value="baseline">baseline</option><option value="first baseline legacy">first baseline legacy</option><option value="last baseline">last baseline</option><option value="stretch legacy">stretch legacy</option></select></div><div id="grid-container"><div class="gridItem1">Grid Item 1</div><div class="gridItem2">Grid Item 2</div><div class="gridItem1">Grid Item 3</div><div class="gridItem2">Grid Item 4</div><div class="gridItem1">Grid Item 5</div></div><script>

         const values = document.getElementById("place-items-values");
  const container = document.getElementById("grid-container");
    

      values.addEventListener("change", () =&gt; {
     container.style.placeItems = values.value;
  });
       </script></body></html>

    CSS place-items – Placing Items in a Flex Container

    The following example demonstrates the different behavior of the place-items property in the flex layout −

    <html><head><style>
   div > div {

      box-sizing: border-box;
  border: 2px solid blue;
  display: flex;
       }
   .row {

      margin-bottom: 20px;
       }
   select {

      padding: 2px;
  background-color: yellow;
  border-radius: 10px;
  color: blue;
       }
   #flex-container {

      height: 350px;
  width: 350px;
  align-items: start;
  background-color: red;
  display: flex; 
  flex-wrap: wrap;       
       }
   #flex-container > div {

      width: 60px;
  min-height: 60px;
  padding: 5px;
  margin: 5px;
       }
   .flexItem1 {

      background-color: greenyellow;
       }
   .flexItem2 {

      background-color: violet;
       }
</style></head><body><div class="row"><label for="place-items-values">place-items: </label><select id="place-items-values"><option value="start">start</option><option value="center">center</option><option value="end">end</option><option value="stretch">stretch</option><option value="center normal">center normal</option><option value="normal start">normal start</option><option value="center normal">center normal</option><option value="start legacy">start legacy</option><option value="end normal">end normal</option><option value="self-start legacy">self-start legacy</option><option value="self-end normal">self-end normal</option><option value="flex-start legacy">flex-start legacy</option><option value="flex-end normal">flex-end normal</option><option value="baseline">baseline</option><option value="first baseline legacy">first baseline legacy</option><option value="last baseline">last baseline</option><option value="stretch legacy">stretch legacy</option></select></div><div id="flex-container"><div class="flexItem1">Flex Item 1</div><div class="flexItem2">Flex Item 2</div><div class="flexItem1">Flex Item 3</div><div class="flexItem2">Flex Item 4</div><div class="flexItem1">Flex Item 5</div><div class="flexItem2">Flex Item 6</div><div class="flexItem1">Flex Item 7</div></div><script>

      const values = document.getElementById("place-items-values");
  const container = document.getElementById("flex-container");
    

      values.addEventListener("change", () =&gt; {
     container.style.placeItems = values.value;
  });
       </script></body></html>

  • place content

    CSS place-content is a shorthand property that aligns content in both the block (column) and inline (row) axes simultaneously. It is used to set both the align-content and justify-content properties in a single declaration.

    This property is a shorthand for the following CSS properties:

    • align-content
    • justify-content

    Possible Values

    • start − Items are aligned to each other against the start edge of the container in the corresponding axis.
    • end − Items are aligned to each other against the end edge of the container in the corresponding axis.
    • flex-start − Aligns the items at the start of the flex container.
    • flex-end − Aligns the items at the end of the flex container.
    • center − Aligns the items at the center of the flex container.
    • left − Aligns the items to the left side of the alignment container. This value acts like start if the property’s axis is not parallel to the inline axis.
    • right − Aligns the items to the right edge of the alignment container in the appropriate axis. This value acts like start if the property’s axis is not parallel to the inline axis.
    • space-between − Items within the alignment container are evenly distributed, with equal spacing between adjacent items, with thefirst and last items are aligned with the main-start and main-end edge.
    • baseline, first baseline, last baseline −
      • These values specify the involvment of first or last baseline alignment in the alignment of the content.
      • First and last baseline are synonym to baseline. First and last refer to the line boxes within the flex items.
      • The start is the fallback alignment for first-baseline and end for last-baseline.
    • space-around − Items within the alignment container are evenly distributed. Each pair of adjacent elements has the same spacing before the first and last items is half the distance between adjacent items.
    • space-evenly − Items within the alignment container are evenly distributed, with equal spacing between adjacent items and at the main-start and main-end edges.
    • stretch − If the total size of items along the main axis is smaller than the alignment container, auto-sized items increase their size equally to fill the container, respecting max-height/max-width constraints.
    • safe − Used with an alignment keyword and when the item overflows the container, causing any loss of data, the alignment is set as per the start value.
    • unsafe − Used with an alignment keyword and even if the item overflows the container, causing any loss of data, the alignment value passed is honored.

    Applies To

    Multi-line flex containers.

    Syntax

    Positional Alignment

    place-content: center start;
place-content: start center;
place-content: end left;
place-content: flex-start center;
place-content: flex-end center;

    Baseline Alignment

    place-content: baseline center;
place-content: first baseline space-evenly;
place-content: last baseline right;

    Distributed Alignment

    place-content: space-between space-evenly;
place-content: space-around space-evenly;
place-content: space-evenly stretch;
place-content: stretch space-evenly;

    The first property value is align-content and the second is justify-content.

    If the second value is missing, the first value is used for both, as long as it is valid. If it is invalid for both, the entire value is invalid.

    CSS place-content – center start Value

    The following example demonstrates property place-content: center start aligns flex items horizontally towards the center and vertically towards the top of the container −

    <html><head><style>
   .flex-container {

      background-color: red;
  height: 300px;
  border: 2px solid black;
  display: flex;
  flex-wrap: wrap;
  place-content: center start;
       }
   .flex-container > div {

      flex-basis: 100px;
  height: 50px;
  margin: 5px;
  background-color: greenyellow;
       }
</style></head><body><div class="flex-container"><div>Flex item 1</div><div>Flex item 2</div><div>Flex item 3</div><div>Flex item 4</div><div>Flex item 5</div><div>Flex item 6</div><div>Flex item 7</div></div></body></html>

    CSS place-content – start center Value

    The following example demonstrates property place-content: start center aligns flex items along the left edge of the container horizontally and vertically in the center of the container −

    <html><head><style>
   .flex-container {

      background-color: red;
  height: 300px;
  border: 2px solid black;
  display: flex;
  flex-wrap: wrap;
  place-content: start center;
       }
   .flex-container > div {

      flex-basis: 100px;
  height: 50px;
  margin: 5px;
  background-color: greenyellow;
       }
</style></head><body><div class="flex-container"><div>Flex item 1</div><div>Flex item 2</div><div>Flex item 3</div><div>Flex item 4</div><div>Flex item 5</div><div>Flex item 6</div><div>Flex item 7</div></div></body></html>

    CSS place-content – end right Value

    The following example demonstrates property place-content: end right aligns the flex items to the right edge horizontally and the bottom edge vertically −

    <html><head><style>
   .flex-container {

      background-color: red;
  height: 300px;
  border: 2px solid black;
  display: flex;
  flex-wrap: wrap;
  place-content: end right;
       }
   .flex-container > div {

      flex-basis: 100px;
  height: 50px;
  margin: 5px;
  background-color: greenyellow;
       }
</style></head><body><div class="flex-container"><div>Flex item 1</div><div>Flex item 2</div><div>Flex item 3</div><div>Flex item 4</div><div>Flex item 5</div><div>Flex item 6</div><div>Flex item 7</div></div></body></html>

    CSS place-content – flex-start center Value

    The following example demonstrates property place-content: flex-start center aligns the flex items horizontally towards the left edge and vertically towards the center of the container −

    <html><head><style>
   .flex-container {

      background-color: red;
  height: 300px;
  border: 2px solid black;
  display: flex;
  flex-wrap: wrap;
  place-content: flex-start center;
       }
   .flex-container > div {

      flex-basis: 100px;
  height: 50px;
  margin: 5px;
  background-color: greenyellow;
       }
</style></head><body><div class="flex-container"><div>Flex item 1</div><div>Flex item 2</div><div>Flex item 3</div><div>Flex item 4</div><div>Flex item 5</div><div>Flex item 6</div><div>Flex item 7</div></div></body></html>

    CSS place-content – flex-end center Value

    The following example demonstrates property place-content: flex-end center aligns the flex items horizontally towards the right end and vertically towards the center of the container −

    <html><head><style>
   .flex-container {

      background-color: red;
  height: 300px;
  border: 2px solid black;
  display: flex;
  flex-wrap: wrap;
  place-content: flex-end center;
       }
   .flex-container > div {

      flex-basis: 100px;
  height: 50px;
  margin: 5px;
  background-color: greenyellow;
       }
</style></head><body><div class="flex-container"><div>Flex item 1</div><div>Flex item 2</div><div>Flex item 3</div><div>Flex item 4</div><div>Flex item 5</div><div>Flex item 6</div><div>Flex item 7</div></div></body></html>

    CSS place-content – last baseline Value

    The following example demonstrates property place-content: last baseline property the last line of items aligns to the baseline of the highest item on that line −

    <html><head><style>
   .flex-container {

      background-color: red;
  height: 300px;
  border: 2px solid black;
  display: flex;
  flex-wrap: wrap;
  place-content: last baseline;
       }
   .flex-container > div {

      flex-basis: 100px;
  height: 50px;
  margin: 5px;
  background-color: greenyellow;
       }
</style></head><body><div class="flex-container"><div>Flex item 1</div><div>Flex item 2</div><div>Flex item 3</div><div>Flex item 4</div><div>Flex item 5</div><div>Flex item 6</div><div>Flex item 7</div></div></body></html>

    CSS place-content – space-between Value

    The following example demonstrates property place-content: space-between property evenly distributes space between the flex items inside the flex container −

    <html><head><style>
   .flex-container {

      background-color: red;
  height: 300px;
  border: 2px solid black;
  display: flex;
  flex-wrap: wrap;
  place-content: space-between;
       }
   .flex-container > div {

      flex-basis: 100px;
  height: 50px;
  margin: 5px;
  background-color: greenyellow;
       }
</style></head><body><div class="flex-container"><div>Flex item 1</div><div>Flex item 2</div><div>Flex item 3</div><div>Flex item 4</div><div>Flex item 5</div><div>Flex item 6</div><div>Flex item 7</div></div></body></html>

    CSS place-content – space-around Value

    The following example demonstrates property place-content: space-around property evenly distributes space around the flex items inside the flex container −

    <html><head><style>
   .flex-container {

      background-color: red;
  height: 300px;
  border: 2px solid black;
  display: flex;
  flex-wrap: wrap;
  place-content: space-around;
       }
   .flex-container > div {

      flex-basis: 100px;
  height: 50px;
  margin: 5px;
  background-color: greenyellow;
       }
</style></head><body><div class="flex-container"><div>Flex item 1</div><div>Flex item 2</div><div>Flex item 3</div><div>Flex item 4</div><div>Flex item 5</div><div>Flex item 6</div><div>Flex item 7</div></div></body></html>

    CSS place-content – space-evenly Value

    The following example demonstrates property place-content: space-evenly property evenly distributes space evenly (between and around) the flex items inside the flex container −

    <html><head><style>
   .flex-container {

      background-color: red;
  height: 300px;
  border: 2px solid black;
  display: flex;
  flex-wrap: wrap;
  place-content: space-around;
       }
   .flex-container > div {

      flex-basis: 100px;
  height: 50px;
  margin: 5px;
  background-color: greenyellow;
       }
</style></head><body><div class="flex-container"><div>Flex item 1</div><div>Flex item 2</div><div>Flex item 3</div><div>Flex item 4</div><div>Flex item 5</div><div>Flex item 6</div><div>Flex item 7</div></div></body></html>

  • pointer event Property

    CSS pointer-event property is used to control how an element responds to pointer events such as mouse clicks, mouseovers, and mouse movements. It allows you to specify whether an element should receive pointer events and whether those events should trigger actions like clicking or hovering.

    Possible Values

    • auto − : This is the default value. It indicates that the element behaves as normal and responds to pointer events based on its specified CSS properties and content. In SVG content, this value and visiblePainted have the same effect.
    • none − This value indicates that the element should not respond to pointer events. Clicks, hover effects, and other interactions will pass through the element as if it were not there, and the elements beneath it will receive those events instead.
    • visiblePainted − This value indicates that the element does not receive pointer events unless they are triggered on a visible, painted area of the element. Transparent areas within the element do not respond to pointer events..
    • visibleFill − Similar to visiblePainted, this value indicates that the element only responds to pointer events triggered on visible, painted areas or the fill of the element, ignoring pointer events on transparent areas.
    • visibleStroke − Similar to visiblePainted and visibleFill, this value indicates that the element only responds to pointer events triggered on visible, painted areas or the stroke of the element, ignoring pointer events on transparent areas.
    • visible − Targets pointer events only when the visibility is set to visible. and the mouse cursor is over its interior (fill) or perimeter (stroke), with the fill and stroke values not affecting event processing
    • painted − This value indicates that the element only responds to pointer events triggered on its painted content. Transparent areas within the element do not respond to pointer events.
    • fill − Similar to painted, this value indicates that the element only responds to pointer events triggered on its fill, ignoring events on transparent areas.
    • stroke − Similar to painted and fill, this value indicates that the element only responds to pointer events triggered on its stroke, ignoring events on transparent areas.
    • all − Targets to pointer events when the pointer is over their interior (fill) or perimeter (stroke). The fill, stroke and visibility properties values are unaffected.

    Applies To

    All elements.

    Syntax

    pointer-event: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all;

    Points To Remember

    When this property is not defined, SVG content has the same properties as the visiblePainted value.

    The “one value in pointer events not only makes the element the target rather than the pointer event, but it also allows the event to pass through, targeting what is underneath the element.

    Disabling pointer events on an element using pointer-events does not mean that event listeners will not be triggered. If a child of that element has pointer-events enabled to allow it to be the event target, events aimed at the child will pass via the parent, potentially triggering event listeners. However, if the pointer activity occurs in an area only covered by the parent, it will be missed by both the child and the parent.

    Elements with pointer-events: none will still get focus via sequential keyboard navigation with the Tab key.

    CSS pointer-event – none Value

    The following example demonstrates how the pointer-event: none property disables the hyperlink from being clicked −

    <html><head><style> 
   a[href="https://tutorialspoint_css_pointer-event.com"] {

      pointer-events: none;
       }
</style></head><body><a href="https://tutorialspoint_css_pointer-event.com">css_pointer-event</a></body></html>

    CSS pointer-event – auto Value

    The following example demonstrates the pointer-event: auto property allows the anchor element to be clickable −

    <html><head><style> 
   a[href="https://tutorialspoint_css_pointer-event.com"] {

      pointer-events: auto;
       }
</style></head><body><a href="https://tutorialspoint_css_pointer-event.com">css_pointer-event</a></body></html>

    CSS pointer-event – Disabling Pointer Events on Images

    The following example demonstrates the pointer-event: auto property disables pointer events (clicking, hovering, etc.) on an images −

    <html><head><style>
   img {

      height: 100px; 
  width: 100px;
  pointer-events: none;
       }
</style></head><body><img src="images/pink-flower.jpg" alt="pink-flower"></body></html>

  • tab size Property

    CSS tab-size property is used to specify the width of tab characters ((U+0009)) within an element. It allows you to control the visual spacing of tab characters, which can be useful when displaying code or other content where tab characters are significant.

    Possible Values

    • <integer> − Specifies the width of tab characters as a multiple of the width of a single space character. For example, a value of 4 would make tab characters four times wider than a space character. It cannot be negative.
    • <length> − Specifies the width of tab characters using a fixed length value, such as pixels (px), points (pt), or ems (em). It cannot be negative.

    Applies to

    Block containers.

    Syntax

    <integer> Values

    tab-size: 4;
tab-size: 0;

    <length> Values

    tab-size: 10px;
tab-size: 2em;

    CSS tab-size – Expanding By Character Count

    The following example demonstrates how the tab-size property sets tab size to the 8 characters and tab size of 12 characters −

    <html><head><style> 
   .tab1 {

      -moz-tab-size: 8; 
  tab-size: 8;
       }
   .tab2 {

      -moz-tab-size: 12; 
  tab-size: 12;
       }
</style></head><body><pre class="tab1">
CSS	 tab-size with    8.
</pre><pre class="tab2">
CSS	 tab-size        with 12.
</pre></body></html>

    CSS tab-size – Comparing To The Default Size

    The following example demonstrates the default tab size, tab size of 3 characters, and tab size of 3 spaces. The white-space: pre keeps the tabs from collapsing. −

    <html><head><style> 
   p {

      white-space: pre;
       }
   .tab1 {

      tab-size: 3;
       }
</style></head><body><p>Without tab-size</p><p>	Default tab-size to 8 characters.</p><p class="tab1">	tab-size with 3 characters.</p><p>   tab-size with 3 spaces.</p></body></html>

  • justify self Property

    CSS justify-self property provides a default alignment along the relevant axis for each box by setting the default justify-self for all box items.

    Syntax

    justify-self: auto | normal | stretch | start | right | center | left | end | overflow-alignment | baseline alignment | initial | inherit;

    Property Values

    ValueDescription
    autoIt inherits the grid container justify-items property value. Default.
    normalIt is dependent on the layout mode, for grid layout it is same as “stretch”
    stretchIt stretches to fill the grid cell if width is not set.
    startIt aligns items at the start in the inline direction edge of the alignment container .
    leftIt aligns items at the left edge of the alignment container .
    centerIt aligns items at the center edge of the alignment container .
    endIt aligns items at the end in the inline-direction edge of the alignment container .
    rightIt aligns items at the right edge of the alignment container .
    overflow alignmentsafe: If the size of the item overflows the alignment container, the alignment mode of the item is set as “start”unsafe: The specified alignment value is honored regardless of the relative sizes of the item and alignment container.
    baseline alignmentThe element is aligned with the baseline of the parent.
    initialIt sets the property to its default value.
    inheritIt inherits the property from the parent element.

    Examples of CSS Justify Self Property

    The following examples explain the justify-self property with different values.

    Justify Self Property with Auto Value

    To let the grid item align according to the default alignment specified by the justify-items property of the grid container, we use the auto value. The grid item will use the alignment behavior set for the container. In the following example, justify-items has been set to “stretch”.

    Example

    <!DOCTYPE html><html><head><style>

      .container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     justify-items: stretch;
     gap: 3px;
     border: 2px solid black;
     height: 150px;
     padding: 5px;
  }
    

      .container&gt;div {
     background-color: lightblue;
     text-align: center;
     border: 2px solid green;
     color: white;
     padding: 15px;
     height: 50px;
  }
    

      .item {
     justify-self: auto;
  }
       </style></head><body><h2>

      CSS justify-self property
       </h2><h4>

      justify-self: auto
       </h4><div class="container"><div>

         Item-1
  &lt;/div&gt;&lt;div class="item"&gt;
     Item-2
  &lt;/div&gt;&lt;div&gt;
     Item-3
  &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    Justify Self Property with Normal Value
    




    The normal value is similar to auto value as it typically corresponds to the default alignment behavior. It generally aligns items based on the default setting of the grid container. This is shown in the following example.
    




    Example
    




    <!DOCTYPE html><html><head><style>

      .container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     justify-items: stretch;
     gap: 3px;
     border: 2px solid black;
     height: 150px;
     padding: 5px;
  }
    

      .container&gt;div {
     background-color: lightblue;
     text-align: center;
     border: 2px solid green;
     color: white;
     padding: 15px;
     height: 50px;
  }
    

      .item {
     justify-self: normal;
  }
       </style></head><body><h2>

      CSS justify-self property
       </h2><h4>

      justify-self: normal
       </h4><div class="container"><div>

         Item-1
  &lt;/div&gt;&lt;div class="item"&gt;
     Item-2
  &lt;/div&gt;&lt;div&gt;
     Item-3
  &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    Justify Self Property with Stretch Value
    




    To make the grid item stretch to fill the entire width of its grid cell, we use the stretch value. It ensures that items expand to fit the available space. This is shown in the following example.
    




    Example
    




    <!DOCTYPE html><html><head><style>

      .container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     justify-items: stretch;
     gap: 3px;
     border: 2px solid black;
     height: 150px;
     padding: 5px;
  }
    

      .container&gt;div {
     background-color: lightblue;
     text-align: center;
     border: 2px solid green;
     color: white;
     padding: 15px;
     height: 50px;
  }
    

      .item {
     justify-self: stretch;
  }
       </style></head><body><h2>
   CSS justify-self property
   </h2><h4>
   justify-self: stretch
   </h4><div class="container"><div>

         Item-1
  &lt;/div&gt;&lt;div class="item"&gt;
     Item-2
  &lt;/div&gt;&lt;div&gt;
     Item-3
  &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    Justify Self Property with Start Value
    




    To align the grid item to the start edge of its grid cell, we use the start value. In left-to-right (LTR) languages, this is equivalent to aligning to the left; in right-to-left (RTL) languages, it aligns to the right. The direction property determines the start edge. This is shown in the following example.
    




    Example
    




    <!DOCTYPE html><html><head><style>

      .container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     justify-items: stretch;
     gap: 3px;
     border: 2px solid black;
     height: 150px;
     padding: 5px;
  }
    

      .container&gt;div {
     background-color: lightblue;
     text-align: center;
     border: 2px solid green;
     color: white;
     padding: 15px;
     height: 50px;
  }
    

      .first-container {
     direction: ltr;
  }
    

      .second-container {
     direction: rtl;
  }
    

      .item {
     justify-self: start;
  }
       </style></head><body><h2>

      CSS justify-self property
       </h2><h4>

      justify-self: start; direction: ltr;
       </h4><div class="first-container container"><div>

         Item-1
  &lt;/div&gt;&lt;div class="item"&gt;
     Item-2
  &lt;/div&gt;&lt;div&gt;
     Item-3
  &lt;/div&gt;&lt;/div&gt;&lt;h4&gt;
  justify-self: start; direction: rtl;
       </h4><div class="second-container container"><div>

         Item-1
  &lt;/div&gt;&lt;div class="item"&gt;
     Item-2
  &lt;/div&gt;&lt;div&gt;
     Item-3
  &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    Justify Self Property with End Value
    




    aligns the grid item to the end edge of its grid cell, we use the end value. In left-to-right (LTR) languages, this is equivalent to aligning to the right; in right-to-left (RTL) languages, it aligns to the left. The direction property determies the end edge. This is shown in the following example.
    




    Example
    




    <!DOCTYPE html><html><head><style>

      .container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     justify-items: stretch;
     gap: 3px;
     border: 2px solid black;
     height: 150px;
     padding: 5px;
  }
    

      .container&gt;div {
     background-color: lightblue;
     text-align: center;
     border: 2px solid green;
     color: white;
     padding: 15px;
     height: 50px;
  }
    

      .first-container {
     direction: ltr;
  }
    

      .second-container {
     direction: rtl;
  }
    

      .item {
     justify-self: end;
  }
       </style></head><body><h2>

      CSS justify-self property
       </h2><h4>

      justify-self: end; direction: ltr;
       </h4><div class="first-container container"><div>

         Item-1
  &lt;/div&gt;&lt;div class="item"&gt;
     Item-2
  &lt;/div&gt;&lt;div&gt;
     Item-3
  &lt;/div&gt;&lt;/div&gt;&lt;h4&gt;
  justify-self: end; direction: rtl;
       </h4><div class="second-container container"><div>

         Item-1
  &lt;/div&gt;&lt;div class="item"&gt;
     Item-2
  &lt;/div&gt;&lt;div&gt;
     Item-3
  &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    Justify Self Property with Center Value
    




    To align the grid item at the center of its grid cell, we use the center value. This is shown in the following example.
    




    Example
    




    <!DOCTYPE html><html><head><style>

      .container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     justify-items: stretch;
     gap: 3px;
     border: 2px solid black;
     height: 150px;
     padding: 5px;
  }
    

      .container&gt;div {
     background-color: lightblue;
     text-align: center;
     border: 2px solid green;
     color: white;
     padding: 15px;
     height: 50px;
  }
    

      .item {
     justify-self: center;
  }
       </style></head><body><h2>

      CSS justify-self property
       </h2><h4>

      justify-self: center
       </h4><div class="container first"><div>

         Item-1
  &lt;/div&gt;&lt;div class="item"&gt;
     Item-2
  &lt;/div&gt;&lt;div&gt;
     Item-3
  &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    Justify Self Property with Left Value
    




    To align the grid item to the left edge of its grid cell, we use the left value. This is shown in the following example.
    




    Example
    




    <!DOCTYPE html><html><head><style>

      .container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     justify-items: stretch;
     gap: 3px;
     border: 2px solid black;
     height: 150px;
     padding: 5px;
  }
    

      .container&gt;div {
     background-color: lightblue;
     text-align: center;
     border: 2px solid green;
     color: white;
     padding: 15px;
     height: 50px;
  }
    

      .item {
     justify-self: left;
  }
       </style></head><body><h2>

      CSS justify-self property
       </h2><h4>

      justify-self: left
       </h4><div class="container first"><div>

         Item-1
  &lt;/div&gt;&lt;div class="item"&gt;
     Item-2
  &lt;/div&gt;&lt;div&gt;
     Item-3
  &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    Justify Self Property with Right Value
    




    To align the grid item to the right edge of its grid cell, we use the right value. This is shown in the following example.
    




    Example
    




    <!DOCTYPE html><html><head><style>

      .container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     justify-items: stretch;
     gap: 3px;
     border: 2px solid black;
     height: 150px;
     padding: 5px;
  }
    

      .container&gt;div {
     background-color: lightblue;
     text-align: center;
     border: 2px solid green;
     color: white;
     padding: 15px;
     height: 50px;
  }
    

      .item {
     justify-self: right;
  }
       </style></head><body><h2>

      CSS justify-self property
       </h2><h4>

      justify-self: right
       </h4><div class="container first"><div>

         Item-1
  &lt;/div&gt;&lt;div class="item"&gt;
     Item-2
  &lt;/div&gt;&lt;div&gt;
     Item-3
  &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    Justify Self Property with Last Baseline Value
    




    To align the grid item such that its baseline aligns with the last baseline of the grid cell, we use the last baseline value. This is useful for aligning text elements so that the last lines of text in each grid item are aligned horizontally. This is shown in the following example.
    




    Example
    




    <!DOCTYPE html><html><head><style>

      .container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     justify-items: stretch;
     gap: 3px;
     border: 2px solid black;
     height: 150px;
     padding: 5px;
  }
    

      .container&gt;div {
     background-color: lightblue;
     text-align: center;
     border: 2px solid green;
     color: white;
     padding: 15px;
     height: 50px;
  }
    

      .item {
     justify-self: last baseline;
  }
       </style></head><body><h2>

      CSS justify-self property
       </h2><h4>

      justify-self: last baseline
       </h4><div class="container"><div>

         Item-1
  &lt;/div&gt;&lt;div class="item"&gt;
     Item-2
  &lt;/div&gt;&lt;div&gt;
     Item-3
  &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

  • justify items Property

    CSS justify-items property is used to align grid-items within their grid area along the inline direction (horizontal). It controls how items are placed within their grid cells, effectively setting their alignment within the container’s grid.

    Syntax

    justify-items: legacy | normal | stretch | start | left | center | end | right |  overflow-alignment | baseline alignment | initial | inherit;

    Property Values

    ValueDescription
    legacyThis value is inherited by box descendants. However, if a descendant has justify-self: auto, only left, right, or centre values are considered, not the legacy keyword. Default.
    normalIt is dependent on the layout mode, for grid layout it is same as “stretch”
    stretchIt stretches to fill the grid cell if width is not set.
    startIt aligns items at the start in the inline direction edge of the alignment container .
    leftIt aligns items at the left edge of the alignment container .
    centerIt aligns items at the center edge of the alignment container .
    endIt aligns items at the end in the inline-direction edge of the alignment container .
    rightIt aligns items at the right edge of the alignment container .
    overflow alignmentsafe: If the size of the item overflows the alignment container, the alignment mode of the item is set as “start”unsafe: The specified alignment value is honored regardless of the relative sizes of the item and alignment container.
    baseline alignmentThe element is aligned with the baseline of the parent.
    initialIt sets the property to its default value.
    inheritIt inherits the property from the parent element.

    Examples of CSS Justify Items Property

    The following examples explain the justify-items property with different values.

    Justify Items Property with Normal Value

    To align items using the default alignment behavior, which typically corresponds to stretch in most modern browsers, we use the normal value. This is shown in the following example.

    Example

    <!DOCTYPE html><html><head><style>

      .container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     justify-items: normal;
     gap: 10px;
     border: 2px solid black;
     height: 150px;
     padding: 5px;
  }
    

      .container&gt;div {
     background-color: lightgreen;
     text-align: center;
     bordeR: 2px solid green;
     color: white;
     padding: 15px;
     height: 50px;
    

      }
       </style></head><body><h2>

      CSS justify-items property
       </h2><h4>

      justify-items: normal
       </h4><div class="container"><div>

         Item-1
  &lt;/div&gt;&lt;div&gt;
     Item-2
  &lt;/div&gt;&lt;div&gt;
     Item-3
  &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    Justify Items Property with Stretch Value
    




    To let the grid item stretch to fill the entire width of its grid cell, we use the stretch value. This is the default value. This is shown in the following example.
    




    Example
    




    <!DOCTYPE html><html><head><style>

      .container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     justify-items: stretch;
     gap: 10px;
     border: 2px solid black;
     height: 150px;
     padding: 5px;
  }
    

      .container&gt;div {
     background-color: lightgreen;
     text-align: center;
     bordeR: 2px solid green;
     color: white;
     padding: 15px;
     height: 50px;
    

      }
       </style></head><body><h2>

      CSS justify-items property
       </h2><h4>

      justify-items: stretch
       </h4><div class="container"><div>

         Item-1
  &lt;/div&gt;&lt;div&gt;
     Item-2
  &lt;/div&gt;&lt;div&gt;
     Item-3
  &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    Justify Items Property with Start Value
    




    To align the grid item to the start edge of its grid area, we use the start value. In left-to-right (LTR) languages, this is equivalent to left; in right-to-left (RTL) languages, it aligns to the right edge. The direction property determines the starting edge. This is shown in the following example.
    




    Example
    




    <!DOCTYPE html><html><head><style>

      .container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     justify-items: start;
     gap: 10px;
     border: 2px solid black;
     height: 150px;
     padding: 5px;
  }
  
  .first{
     direction: ltr;
  }
  .second{
     direction: rtl;
  }
    

      .container&gt;div {
     background-color: lightgreen;
     text-align: center;
     bordeR: 2px solid green;
     color: white;
     padding: 15px;
     height: 50px;
    

      }
       </style></head><body><h2>

      CSS justify-items property
       </h2><h4>

      justify-items: start; direction: ltr;
       </h4><div class="container first"><div>

         Item-1
  &lt;/div&gt;&lt;div&gt;
     Item-2
  &lt;/div&gt;&lt;div&gt;
     Item-3
  &lt;/div&gt;&lt;/div&gt;&lt;h4&gt;
  justify-items: start; direction: rtl;
       </h4><div class="container second"><div>

         Item-1
  &lt;/div&gt;&lt;div&gt;
     Item-2
  &lt;/div&gt;&lt;div&gt;
     Item-3
  &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    Justify Items Property with End Value
    




    To align the grid item to the end edge of its grid area, we use the end value. In LTR languages, this is equivalent to right; in RTL languages, it aligns to the left edge. The direction property determines the ending edge This is shown in the following example.
    




    Example
    




    <!DOCTYPE html><html><head><style>

      .container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     justify-items: end;
     gap: 10px;
     border: 2px solid black;
     height: 150px;
     padding: 5px;
  }
    

      .first {
     direction: ltr;
  }
    

      .second {
     direction: rtl;
  }
    

      .container&gt;div {
     background-color: lightgreen;
     text-align: center;
     bordeR: 2px solid green;
     color: white;
     padding: 15px;
     height: 50px;
    

      }
       </style></head><body><h2>

      CSS justify-items property
       </h2><h4>

      justify-items: end; direction: ltr
       </h4><div class="container first"><div>

         Item-1
  &lt;/div&gt;&lt;div&gt;
     Item-2
  &lt;/div&gt;&lt;div&gt;
     Item-3
  &lt;/div&gt;&lt;/div&gt;&lt;h4&gt;
  justify-items: end; direction: rtl
       </h4><div class="container second"><div>

         Item-1
  &lt;/div&gt;&lt;div&gt;
     Item-2
  &lt;/div&gt;&lt;div&gt;
     Item-3
  &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    Justify Items Property with Center Value
    




    To align the grid item to the center of its grid area in the inline direction, we use the center value. All grid items are aligned at the center horizontally within their grid cells. This is shown in the following example.
    




    Example
    




    <!DOCTYPE html><html><head><style>

      .container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     justify-items: center;
     gap: 10px;
     border: 2px solid black;
     height: 150px;
     padding: 5px;
  }
    

      .container&gt;div {
     background-color: lightgreen;
     text-align: center;
     bordeR: 2px solid green;
     color: white;
     padding: 15px;
     height: 50px;
    

      }
       </style></head><body><h2>

      CSS justify-items property
       </h2><h4>

      justify-items: center
       </h4><div class="container"><div>

         Item-1
  &lt;/div&gt;&lt;div&gt;
     Item-2
  &lt;/div&gt;&lt;div&gt;
     Item-3
  &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    Justify Items Property with Left Value
    




    To align the grid item to the left edge of its grid area in the inline direction, we use the left value. All grid items are positioned flush against the left side of their respective grid cells. This is shown in the following example.
    




    Example
    




    <!DOCTYPE html><html><head><style>

      .container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     justify-items: left;
     gap: 10px;
     border: 2px solid black;
     height: 150px;
     padding: 5px;
  }
    

      .container&gt;div {
     background-color: lightgreen;
     text-align: center;
     bordeR: 2px solid green;
     color: white;
     padding: 15px;
     height: 50px;
    

      }
       </style></head><body><h2>

      CSS justify-items property
       </h2><h4>

      justify-items: left
       </h4><div class="container"><div>

         Item-1
  &lt;/div&gt;&lt;div&gt;
     Item-2
  &lt;/div&gt;&lt;div&gt;
     Item-3
  &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    Justify Items Property with Right Value
    




    To align the grid item to the right edge of its grid area in the inline direction, we use the right value. All grid items are positioned flush against the right side of their respective grid cells. This is shown in the following example.
    




    Example
    




    <!DOCTYPE html><html><head><style>

      .container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     justify-items: right;
     gap: 10px;
     border: 2px solid black;
     height: 150px;
     padding: 5px;
  }
    

      .container&gt;div {
     background-color: lightgreen;
     text-align: center;
     bordeR: 2px solid green;
     color: white;
     padding: 15px;
     height: 50px;
    

      }
       </style></head><body><h2>

      CSS justify-items property
       </h2><h4>

      justify-items: right
       </h4><div class="container"><div>

         Item-1
  &lt;/div&gt;&lt;div&gt;
     Item-2
  &lt;/div&gt;&lt;div&gt;
     Item-3
  &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    Justify Items Property with Baseline Value
    




    To align the grid item along the baseline of the grid cell, we use the baseline value. This is useful to align items with a specific baseline. This is shown in the following example.
    




    Example
    




    <!DOCTYPE html><html><head><style>

      .container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     justify-items: baseline;
     gap: 10px;
     border: 2px solid black;
     height: 150px;
     padding: 5px;
  }
    

      .container&gt;div {
     background-color: lightgreen;
     text-align: center;
     bordeR: 2px solid green;
     color: white;
     padding: 15px;
     height: 50px;
    

      }
       </style></head><body><h2>

      CSS justify-items property
       </h2><h4>

      justify-items: baseline
       </h4><div class="container"><div>

         Item-1
  &lt;/div&gt;&lt;div&gt;
     Item-2
  &lt;/div&gt;&lt;div&gt;
     Item-3
  &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    Justify Items Property with Legacy Right Value
    




    This value ensures that items are aligned to the right edge of their grid cells according to the behavior implemented by browsers before the CSS Grid specification was fully standardized. It was designed to provide backward compatibility with older browser behaviors that used a different alignment system. This is shown in the following example.
    




    Example
    




    <!DOCTYPE html><html><head><style>

      .container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     justify-items: legacy right;
     gap: 10px;
     border: 2px solid black;
     height: 150px;
     padding: 5px;
  }
    

      .container&gt;div {
     background-color: lightgreen;
     text-align: center;
     bordeR: 2px solid green;
     color: white;
     padding: 15px;
     height: 50px;
    

      }
       </style></head><body><h2>

      CSS justify-items property
       </h2><h4>

      justify-items: legacy right
       </h4><div class="container"><div>

         Item-1
  &lt;/div&gt;&lt;div&gt;
     Item-2
  &lt;/div&gt;&lt;div&gt;
     Item-3
  &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

  • overscroll behavior

    The CSS property overscroll-behavior is a shorthand property that determines what a browser does when the boundary of a scrolling area is reached.

    The constituent properties of this property are overscroll-behavior-x and overscroll-behavior-y.

    Scroll chaining is a behavior that is observed when a user scrolls past the boundary (top, bottom, left or right) of a scrollable element, causing the scrolling on an ancestor element. This creates a chain effect in scrolling.

    For example, if you have a modal dialog box on the webpage, that has content which can be scrolled vertically. As you reach the end of the scrollable area of this modal, the scrolling continues on the main page’s content behind the modal dialog box. This continuous scrolling experience is called the scroll chaining.

    This behavior may or may not be desirable and in order to avoid it, the property overscroll-behavior is used. The property is applied only on the scrollable containers. Setting this property on <iframe> has no effect and thus it needs to be set on both the <html> and the <body> elements of the iframe’s document.

    Possible Values

    The CSS property overscroll-behavior is defined as one or two of the keywords as given below. The two keywords specifies the value on the x and y axes respectively. When only one value is specified, both the x and y axes have the same value.

    • auto − The default scroll behavior is normal.
    • contain − The scroll behavior is seen only in the element where the value is set. No scrolling set on neighboring elements.
    • none − No scroll chaining behavior is seen. Default scroll overflow behavior is avoided.

    Applies To

    All non-replaced block-level elements and non-replaced inline-block elements.

    Syntax

    overscroll-behavior = [ contain | auto | none ]{1,2}

    CSS overscroll-behavior – auto Value

    Following example demonstrates the use of overscroll-behavior: auto that sets the scroll effect continuous. So as the boundary of the scrollable element is reached, on scrolling, the parent element gets scrolled.

    <html><head><style>
   div {

      margin: 5px 15px;
  padding: 3px;
  border: solid black 1px;
  overflow: auto;
  border: 2px solid black;
       }

   #main-box {

      display: flex;
  flex-wrap: wrap;
  background-color: cornsilk;
  height: 800px;
       }

   #box-1 {

      background-color: lightblue;
  overscroll-behavior: auto;
       }

   #main-box > div {

      flex: 1;
  height: 150px;
       }
</style></head><body><h1>overscroll-behavior Property</h1><p>The box displayed below has overscroll-behavior set as auto, which is the default value.</p><p>Scroll the blue box using the mouse and once it is scrolled completely keep scrolling and see the parent element gets scrolled.</p><div id="main-box"><div id="box-1"><h2>overscroll-behavior: auto</h2><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos voluptatum adipisci harum? Repudiandae doloribus aspernatur ex odit rem quasi eligendi perspiciatis impedit porro reiciendis? Ipsa fugit reprehenderit nesciunt quae voluptates, labore ducimus iste consectetur quibusdam sapiente modi et ab reiciendis assumenda ullam, voluptatibus maiores sunt cupiditate amet. Magnam vel explicabo tempora ad numquam cumque soluta aliquid dolore, ducimus et obcaecati perferendis voluptatibus beatae quasi, facilis nihil culpa dolorum modi officia ab similique at. Iure ab, eius amet similique quaerat tempore, exercitationem aperiam fugiat pariatur error ratione laborum autem nam neque quae quo sed ipsam ullam animi officiis. Magnam assumenda facere similique molestiae harum ratione, esse, laboriosam cum vel quisquam labore est tenetur vero quas ex eum atque voluptatibus temporibus voluptate iste ipsam fugiat reiciendis dolor velit. Delectus molestiae deleniti quam, nisi ullam perspiciatis doloribus dolore dolores, ratione, reprehenderit rerum. Saepe ex, maiores reiciendis aperiam laudantium ipsa ipsam iure amet aliquid at suscipit labore voluptate et iste architecto fugit esse est a eum dicta asperiores error exercitationem minus. Praesentium voluptatem recusandae accusamus veritatis voluptate! Officia nostrum esse vitae fuga odit ab optio quia autem consequuntur, ea modi dignissimos enim assumenda voluptatibus maxime explicabo aliquid repellendus magni molestias hic dolores earum tenetur.</p></div></div></body></html>

    CSS overscroll-behavior – Comparison of Values

    Following example demonstrates the use of overscroll-behavior: contain that sets the scrolling effect contained to the element it is applied. So as the boundary of the scrollable element is reached, on scrolling, the parent element does not get scrolled.

    <html><head><style>
   div {
  margin: 5px 15px;
  padding: 3px;
  border: solid black 1px;
  overflow: auto;
  border: 2px solid black;
}
   #main-box {

      display: flex;
  flex-wrap: wrap;
  background-color: darkcyan;
  height: 800px;
       }

   #box-1 {

      background-color: pink;
       }

   #box-2 {

      background-color: aliceblue;
  overscroll-behavior: contain;
       }
   #main-box > div {
  flex: 1;
  height: 150px;
}
</style></head><body><h1>overscroll-behavior Property</h1><p>The two boxes displayed below has overscroll-behavior set as auto and contain, respectively.</p><p>Scroll the first pink box using the mouse and once it is scrolled completely keep scrolling and see the parent element gets scrolled.</p><p>Scroll the second white box using the mouse and once it is scrolled completely keep scrolling and see the parent element not getting scrolled.</p><div id="main-box"><div id="box-1"><h3>overscroll-behavior: auto</p><p>

          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos voluptatum adipisci harum? Repudiandae doloribus aspernatur ex odit rem quasi eligendi perspiciatis impedit porro reiciendis? Ipsa fugit reprehenderit nesciunt quae voluptates, labore ducimus iste consectetur quibusdam sapiente modi et ab reiciendis assumenda ullam, voluptatibus maiores sunt cupiditate amet. Magnam vel explicabo tempora ad numquam cumque soluta aliquid dolore, ducimus et obcaecati perferendis voluptatibus beatae quasi, facilis nihil culpa dolorum modi officia ab similique at. Iure ab, eius amet similique quaerat tempore, exercitationem aperiam fugiat pariatur error ratione laborum autem nam neque quae quo sed ipsam ullam animi officiis. Magnam assumenda facere similique molestiae harum ratione, esse, laboriosam cum vel quisquam labore est tenetur vero quas ex eum atque voluptatibus temporibus voluptate iste ipsam fugiat reiciendis dolor velit. Delectus molestiae deleniti quam, nisi ullam perspiciatis doloribus dolore dolores, ratione, reprehenderit rerum. Saepe ex, maiores reiciendis aperiam laudantium ipsa ipsam iure amet aliquid at suscipit labore voluptate et iste architecto fugit esse est a eum dicta asperiores error exercitationem minus. Praesentium voluptatem recusandae accusamus veritatis voluptate! Officia nostrum esse vitae fuga odit ab optio quia autem consequuntur, ea modi dignissimos enim assumenda voluptatibus maxime explicabo aliquid repellendus magni molestias hic dolores earum tenetur.
  &lt;/p&gt;&lt;/div&gt;&lt;div id="box-2"&gt;&lt;h3&gt;overscroll-behavior: contain&lt;/p&gt;&lt;p&gt;
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos voluptatum adipisci harum? Repudiandae doloribus aspernatur ex odit rem quasi eligendi perspiciatis impedit porro reiciendis? Ipsa fugit reprehenderit nesciunt quae voluptates, labore ducimus iste consectetur quibusdam sapiente modi et ab reiciendis assumenda ullam, voluptatibus maiores sunt cupiditate amet. Magnam vel explicabo tempora ad numquam cumque soluta aliquid dolore, ducimus et obcaecati perferendis voluptatibus beatae quasi, facilis nihil culpa dolorum modi officia ab similique at. Iure ab, eius amet similique quaerat tempore, exercitationem aperiam fugiat pariatur error ratione laborum autem nam neque quae quo sed ipsam ullam animi officiis. Magnam assumenda facere similique molestiae harum ratione, esse, laboriosam cum vel quisquam labore est tenetur vero quas ex eum atque voluptatibus temporibus voluptate iste ipsam fugiat reiciendis dolor velit. Delectus molestiae deleniti quam, nisi ullam perspiciatis doloribus dolore dolores, ratione, reprehenderit rerum. Saepe ex, maiores reiciendis aperiam laudantium ipsa ipsam iure amet aliquid at suscipit labore voluptate et iste architecto fugit esse est a eum dicta asperiores error exercitationem minus. Praesentium voluptatem recusandae accusamus veritatis voluptate! Officia nostrum esse vitae fuga odit ab optio quia autem consequuntur, ea modi dignissimos enim assumenda voluptatibus maxime explicabo aliquid repellendus magni molestias hic dolores earum tenetur.
  &lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    CSS overscroll-behavior - Two Keyword Values
    




    Following example demonstrates the use of overscroll-behavior: auto contain (two values), that sets the scrolling effect auto on x axis and contained on y-axis. So as the vertical boundary of the scrollable element is reached, on scrolling, the parent element does not get scrolled (as contained), but the horizontal boundary set as auto, which leads to scrolling of parent element on the x-axis.
    




    Open Compiler
    




    <html><head><style>
   #main-box, #box-2 {

      margin: 15px;
  padding: 3px;
  border: solid black 1px;
  overflow: auto;
       }

   #main-box p {

      width: 200%;
       }

   #main-box {

      background-color: rgb(197, 255, 236);
  height: 1300px;
  width: 2000px;
       }

   #box-2 {

      float: left;
  height: 250px;
  width: 30%;
  background-color: rgb(255, 205, 213);
  overscroll-behavior: auto none;
       } 
</style></head><body><h1>overscroll-behavior - Two value Syntax</h1><p>The two value syntax is used with overscroll-behavior as auto on x axis and none on y-axis.</p><div id="main-box"><div id="box-2"><h3>overscroll-behavior: auto none</p><p>

            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos voluptatum adipisci harum? Repudiandae doloribus aspernatur ex odit rem quasi eligendi perspiciatis impedit porro reiciendis? Ipsa fugit reprehenderit nesciunt quae voluptates, labore ducimus iste consectetur quibusdam sapiente modi et ab reiciendis assumenda ullam, voluptatibus maiores sunt cupiditate amet. Magnam vel explicabo tempora ad numquam cumque soluta aliquid dolore, ducimus et obcaecati perferendis voluptatibus beatae quasi, facilis nihil culpa dolorum modi officia ab similique at. Iure ab, eius amet similique quaerat tempore, exercitationem aperiam fugiat pariatur error ratione laborum autem nam neque quae quo sed ipsam ullam animi officiis. Magnam assumenda facere similique molestiae harum ratione, esse, laboriosam cum vel quisquam labore est tenetur vero quas ex eum atque voluptatibus temporibus voluptate iste ipsam fugiat reiciendis dolor velit. Delectus molestiae deleniti quam, nisi ullam perspiciatis doloribus dolore dolores, ratione, reprehenderit rerum. Saepe ex, maiores reiciendis aperiam laudantium ipsa ipsam iure amet aliquid at suscipit labore voluptate et iste architecto fugit esse est a eum dicta asperiores error exercitationem minus. Praesentium voluptatem recusandae accusamus veritatis voluptate! Officia nostrum esse vitae fuga odit ab optio quia autem consequuntur, ea modi dignissimos enim assumenda voluptatibus maxime explicabo aliquid repellendus magni molestias hic dolores earum tenetur.
  &lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    CSS overscroll-behavior - Associated Properties
    




    Following table lists down the CSS properties that are associated with overscroll-behavior property:
    




    PropertyDescription
    overscroll-behavior-xSets the browser's behavior when the horizontal boundary of a scrolling area is reached.
    overscroll-behavior-ySets the browser's behavior when the vertical boundary of a scrolling area is reached.
    overscroll-behavior-blockSets the browser's behavior when the block direction boundary of a scrolling area has been reached.
    overscroll-behavior-inlineSets the browser's behavior when the inline direction boundary of a scrolling area has been reached.