nicoqh / inuit-flexgrid Goto Github PK
View Code? Open in Web Editor NEWFlexbox grid for inuitcss
Flexbox grid for inuitcss
Hi, nico,
I would like to use your library in a project, but would need your advice. I am not sure if this is the proper place to ask - if not, please redirect me - thanks!
My question:
How do I add padding to an ".o-grid__cell"? Usually I used ".o-box", but this one would currently override the display:flex
(o-grid) to display:block
(o-box) and therefore mess with the flex grid.
If I define a similar class - like .o-gridbox
with only the padding, but no display attribute defined - I could manage the padding, but I do not know how to make resulting columns equal height.
Currently I have this:
<header class="o-wrapper o-wrapper--fullwidth">
<div class="o-grid o-grid--stretch o-grid--auto">
<div class="o-grid__cell u-1/2">
<div class="o-gridbox has-green-bg">
<h1>50%</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam ullam sed alias deserunt, libero eius illo ratione laudantium accusantium ducimus exercitationem dolorem fuga vel, in perspiciatis voluptates corporis nemo inventore!</p>
</div>
</div>
<div class="o-grid__cell u-1/2">
<div class="o-gridbox has-green-bg">50%</div>
</div>
</div>
</header>
With these additional classes:
.o-wrapper--fullwidth {
max-width: 100vw;
background: red;
}
.has-green-bg {
background-color: green;
}
.o-gridbox {
padding: $inuit-global-spacing-unit;
}
The right box should cover the whole height ("stretch"?), but does not do so. I realize that it could be done by adding height: 100%;
to .o-gridbox
, but isn't that something stretch
should do anyway?
I added a screenshot.
Would love to read you advices, thoughts and hints! Thanks!
Nice extension of inuit!
Is there a reason why align-self isn't included?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.