Flexbox Gaps
We can use margins to space out grid items, the great thing about the gap feature is that you just only get gaps between your items; you are doing not find yourself with additional space to account for at the beginning and end of the grid. Adding margins has typically been how we’ve got created space between flex items. to make an everyday space between flex items, we use a margin. If we don’t desire a margin at the beginning and end, we’ve got to use a negative margin on the container to get rid of it.
Gap Support For Flexbox
You can use the subsequent query, to test if you’ve got gap support for flexbox
@supports (display: grid)
}
If we test for a gap: 20px, we’d get a positive response in Chrome which currently doesn’t support gap in Flexbox but does support it in Grid.
Native Masonry Support
Developers often ask if CSS Grid may be accustomed create a Masonry- or Pinterest-styled layout.
Grid isn’t masonry because masonry uses row wise arrangement. Grid aligns elements in rows and columns.
Subgrid
The extent 2 of the CSS Grid Layout includes a subgrid value for both grid-template-columns and grid-template-rows.
The CSS Subgrid solves a typical problem with nested grids. Currently, the subgrid only works on Firefox.
.grid {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: repeat(4, minmax(100px, auto));
}
.item {
display: grid;
grid-column: 2 / 7;
grid-row: 2 / 4;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
}
.subitem {
grid-column: 3 / 6;
grid-row: 1 / 3;
}
Prefers-Reduced-Data
This is a media feature that permits CSS to test if the visitor has enabled data saving in their device and adjust the web site accordingly.
• no-preference
The user has made no preference to cut back data. This keyword value evaluates as false within the boolean context.
• reduce
The user prefers lightweight alternate content.
@media (prefers-reduced-data: reduce) “>
}
The site could render a smaller image per the preference of a user who has turned on data-saving mode.
::marker
The ::marker may be a pseudo-element. It allows us to focus on the list marker that’s we are able to change list bullet’s color or size. This wasn’t possible before because the entire list item had to be targeted earlier.( text and marker)
Only the subsequent properties are allowed with ::marker as a selector:
• All font properties
• Color
• The content property
• text-combine-upright
• unicode-bidi
• direction properties
Consider an example,
ul li::marker
{
color: red;
font-size: 1.5em;
}
We will be happy to answer your questions on designing, developing, and deploying comprehensive enterprise web, mobile apps and customized software solutions that best fit your organization needs.
As a reputed Software Solutions Developer we have expertise in providing dedicated remote and outsourced technical resources for software services at very nominal cost. Besides experts in full stacks We also build web solutions, mobile apps and work on system integration, performance enhancement, cloud migrations and big data analytics. Don’t hesitate to get in touch with us!
