gap
, margin
, etc.);thumbnail
, heading
and subheading
are present in both template declarations. However, the meta
area is declared in templateDesktop
only. This makes meta
a conditional area automatically.template
props of the Composition
component:Meta
grid area in a <MediaQuery/>
component from react-responsive. This area will render on lg
breakpoint and up, because there is no succeeding template declaration that would contradict that, and because "up" is the default responsive behavior.template
with the Lg
, we stated that the given value must be applied on the lg
breakpoint and up. Following this example, let's create a different gutter between the grid areas on different breakpoints:gutter
and gutterLg
.gutter
adds a grid-gap
of 10px
on mobile screens, since xs
is the default breakpoint,gutterLg
adds a grid-gap
of 20px
on large screens and up, since up
is the default behavior.