CSS Flex Masonery layout #55

martinlombana · 2021-03-26T20:53:56Z

martinlombana
Mar 26, 2021

How can we achieve, with sciter flex, such a layout? (masonery layout) Whith my example, in CSS3, in the browser we can see this:

But it is seen like this in sciter-js scapp.exe:

`

`.container {
display: flex;
flex-flow: column wrap;
align-content: space-between;
/* Your container needs a fixed height, and it

needs to be taller than your tallest column. */
height: 760px;

/* Optional */
background-color: #f7f7f7;
border-radius: 3px;
padding: 20px;
width: 60%;
margin: 40px auto;
counter-reset: items;
}

.item {
width: 19%;
/* Optional */
position: relative;
margin-bottom: 2%;
border-radius: 3px;
background-color: #a1cbfa;
border: 1px solid #4290e2;
box-shadow: 0 2px 2px rgba(0,90,250,0.05),
0 4px 4px rgba(0,90,250,0.05),
0 8px 8px rgba(0,90,250,0.05),
0 16px 16px rgba(0,90,250,0.05);
color: #fff;
padding: 15px;
box-sizing: border-box;
}

div.item::before {
counter-increment: items;
content: counter(items);
}

/* Re-order items into 3 rows */
.item:nth-of-type(5n+1) { order: 1; }
.item:nth-of-type(5n+2) { order: 2; }
.item:nth-of-type(5n+3) { order: 3; }
.item:nth-of-type(5n+4) { order: 4; }
.item:nth-of-type(5n) { order: 5; }

/* Force new columns */
.break {
flex-basis: 100%;
width: 0;
border: 1px solid #ddd;
margin: 0;
content: "";
padding: 0;
}

body { font-family: sans-serif; }
h3 { text-align: center; }`

Answered by c-smile

Mar 28, 2021

If you know upfront how columns are split then you can use {clear:after | before;} to force column wrapping:

<html>
    <head>
        <title>Test</title>
        <style>

body {
  flow:vertical-wrap;
  overflow-x:scroll-indicator;  
  border-spacing:1em;
}

body > div {
  width:64px;
  background:gold;
}

body > div:nth-child(4) {clear:after;} 
body > div:nth-child(8) {clear:after;} 

        </style>
    </head>
    <body>
      <div style="height:64px" />
      <div style="height:48px" />
      <div style="height:64px" />
      <div style="height:64px" />
      <div style="height:48px" />
      <div style="height:64px" />
      <div style="height:48px" />
      <div style="height:64px"…

View full answer

c-smile · 2021-03-26T21:26:23Z

c-smile
Mar 26, 2021
Maintainer

<html>
    <head>
        <title>Test</title>
        <style>

body {
  flow:vertical-wrap;
  overflow-x:scroll-indicator;  
  border-spacing:1em;
}

body > div {
  width:64px;
  background:gold;
}

        </style>
    </head>
    <body>
      <div style="height:64px" />
      <div style="height:48px" />
      <div style="height:64px" />
      <div style="height:64px" />
      <div style="height:48px" />
      <div style="height:64px" />
      <div style="height:48px" />
      <div style="height:64px" />
      <div style="height:48px" />
      <div style="height:64px" />
      <div style="height:48px" />
      <div style="height:64px" />
      <div style="height:48px" />
    </body>
</html>

1 reply

martinlombana Mar 28, 2021
Author

Thanks, but this stills gets this result in sciter-js:

Instead of being distributed in 3 Rows via CSS. Is there any equivalent of the above?

Thanks!

c-smile · 2021-03-28T20:58:51Z

c-smile
Mar 28, 2021
Maintainer

Here is what I see here:

1 reply

martinlombana Mar 28, 2021
Author

Nevermind. I see that if the screen is smaller. So your example does work. Nevertheless, my aim was to distribute all the children into 3 columns with css, regardless of the screen height, which is obtained in regular css3 with:

/* Re-order items into 3 rows */
.item:nth-of-type(5n+1) { order: 1; }
.item:nth-of-type(5n+2) { order: 2; }
.item:nth-of-type(5n+3) { order: 3; }
.item:nth-of-type(5n+4) { order: 4; }
.item:nth-of-type(5n) { order: 5; }
/* Force new columns */
.break {
flex-basis: 100%;
width: 0;
border: 1px solid #ddd;
margin: 0;
content: "";
padding: 0;
}

Your example does work but it is not exactly the distribution that I wanted to achieve. Is there any similar way to distribute all the children into 3 columns?

c-smile · 2021-03-28T21:13:34Z

c-smile
Mar 28, 2021
Maintainer

If you know upfront how columns are split then you can use {clear:after | before;} to force column wrapping:

<html>
    <head>
        <title>Test</title>
        <style>

body {
  flow:vertical-wrap;
  overflow-x:scroll-indicator;  
  border-spacing:1em;
}

body > div {
  width:64px;
  background:gold;
}

body > div:nth-child(4) {clear:after;} 
body > div:nth-child(8) {clear:after;} 

        </style>
    </head>
    <body>
      <div style="height:64px" />
      <div style="height:48px" />
      <div style="height:64px" />
      <div style="height:64px" />
      <div style="height:48px" />
      <div style="height:64px" />
      <div style="height:48px" />
      <div style="height:64px" />
      <div style="height:48px" />
      <div style="height:64px" />
      <div style="height:48px" />
      <div style="height:64px" />
      <div style="height:48px" />
    </body>
</html>

0 replies

martinlombana · 2021-03-28T21:19:23Z

martinlombana
Mar 28, 2021
Author

I see. Thanks for the insight!

…

___________________________________ *Martín Lombana* *TODOLOGIC.COM <http://TODOLOGIC.COM> | APPS & MORE* *+34 633 63 02 35 | *+34 946 759 137 *INSTAGRAM *→* @ <https://instagram.com/todologic>TODOLOGIC <https://instagram.com/todologic>*

On Sun, 28 Mar 2021 at 23:13, Andrew ***@***.***> wrote: If you know upfront how columns are split then you can use {clear:after | before;} to force column wrapping: <html> <head> <title>Test</title> <style> body { flow:vertical-wrap; overflow-x:scroll-indicator; border-spacing:1em; } body > div { width:64px; background:gold; } body > div:nth-child(4) {clear:after;} body > div:nth-child(8) {clear:after;} </style> </head> <body> <div style="height:64px" /> <div style="height:48px" /> <div style="height:64px" /> <div style="height:64px" /> <div style="height:48px" /> <div style="height:64px" /> <div style="height:48px" /> <div style="height:64px" /> <div style="height:48px" /> <div style="height:64px" /> <div style="height:48px" /> <div style="height:64px" /> <div style="height:48px" /> </body> </html> — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#55 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEMAOL7WNVWQJIB5CZPCAPTTF6LYXANCNFSM4Z6I5RJA> .

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CSS Flex Masonery layout #55

{{title}}

Replies: 4 comments 2 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

CSS Flex Masonery layout #55

martinlombana Mar 26, 2021

Replies: 4 comments · 2 replies

c-smile Mar 26, 2021 Maintainer

martinlombana Mar 28, 2021 Author

c-smile Mar 28, 2021 Maintainer

martinlombana Mar 28, 2021 Author

c-smile Mar 28, 2021 Maintainer

martinlombana Mar 28, 2021 Author

martinlombana
Mar 26, 2021

Replies: 4 comments 2 replies

c-smile
Mar 26, 2021
Maintainer

martinlombana Mar 28, 2021
Author

c-smile
Mar 28, 2021
Maintainer

martinlombana Mar 28, 2021
Author

c-smile
Mar 28, 2021
Maintainer

martinlombana
Mar 28, 2021
Author