Articles by

Mojtaba Seyedi

Direct link to the article grid-template

grid-template

The grid-template CSS property is a shorthand that allows you to define grid columns, rows, and areas in a CSS grid container with one declaration.

.grid-container {
  display: grid;
  grid-template:
    "header  header"
    "sidebar main"   1fr
    "footer  footer" min-content
    / 250px   
(Updated on )
Direct link to the article grid-template-areas

grid-template-areas

The grid-template-areas CSS property allows you to define and name the cells (or “areas”) in a CSS grid container.

.grid-container {
  display: grid;
  grid-template-areas: "header header" "sidebar main";
}

So, that example above? We get a two-by-two grid where the …

(Updated on )
Direct link to the article mask-border

mask-border

The mask-border CSS property sets a border image to an element’s masked border area. It is s shorthand for setting the mask-border-source, mask-border-slice, mask-border-width, mask-border-outset, mask-border-repeat, and mask-border-mode properties in a single declaration.
(Updated on )
Direct link to the article outline-color

outline-color

The outline-color CSS property specifies the color of an element’s outline. What’s an outline? An outline is a line that is drawn around elements — outside the border edge — that is used for accessibility or decoration purposes when that …

(Updated on )
Direct link to the article outline-style

outline-style

The outline-style CSS property specifies the style of an element’s outline. What’s an outline? An outline is a line that is drawn around elements — outside the border edge — that is used for accessibility or decoration purposes when that …