Add column examples #549
Add column examples #549
Conversation
schalkneethling
left a comment
There was a problem hiding this comment.
Couple of items to address. Thanks a lot for all your hard work @mfluehr
| </div> | ||
|
|
||
| <div class="example-choice"> | ||
| <pre><code id="example_six" class="language-css">column-rule-style: inset;</code></pre> |
There was a problem hiding this comment.
It is very hard to see the difference between solid, ridge and inset. If you lighten the column-rule-color to say #999 for ridge, it is clearer. My suggestion would then be, drop the inset example, and add the lighter column-rule-color for the ridge example.
| </div> | ||
|
|
||
| <div class="example-choice"> | ||
| <pre><code id="example_four" class="language-css">column-width: 19ch;</code></pre> |
There was a problem hiding this comment.
Not sure if it is a browser support issue but, clicking through these I do not see any changes to the columns on the right. Looking at browser support, it does not look like that is the issue. Perhaps this is not well suited for interactive examples, as it may rely on resizing the content output area? @mfluehr @wbamberg
There was a problem hiding this comment.
I took another stab at this, so take a look. It's showing variety for me now in both Firefox and Chrome. (However, results do vary some depending on browser size.)
| </div> | ||
|
|
||
| <div class="example-choice"> | ||
| <pre><code id="example_two" class="language-css">columns: 10rem 2;</code></pre> |
There was a problem hiding this comment.
I wonder, could something like this be interesting here? columns: 6rem auto; - When you play around with the rem value you can see how the browser splits the content into more or less rows. Thoughts @mfluehr
* upstream/master: Adding list-style css example. (mdn#547) Flex examples (mdn#558) Add column examples (mdn#549) Remove CSS example id attributes (mdn#556) Add various text examples (mdn#545) Add contribution item (mdn#552) Adds @helmutgranda as contributor (mdn#550) Adding border radius example with recommended changes. (mdn#546) Add `quotes` example (mdn#543)
This includes
column-count,column-fill,column-gap,column-rule-color,column-rule-style,column-rule-width,column-rule,column-width, andcolumns.