I have a CSS grid
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, 12.5vw );
grid-template-rows: repeat(auto-fill, 12.5vw );
background-color: black;
grid-auto-flow: row dense;
color: #444;
}
<div class="wrapper">
<div class="box wide tall a">
</div>
<div class="box b">
</div>
<div class="box c">
</div>
<div class="box c">
</div>
<div class="box d">
</div>
<div class="box e">
</div>
<div class="box f">
</div>
<div class="box g">
</div>
<div class="box h">
</div>
</div>
And I would like to know the number of columns in my javascript code. is it possible?
EDIT: the reason i want this is that if there is less than the good amount of items so that it makes a square, I want these extra items not to be displayed at all.
Thanks a lot!
You can use getElementsByClassName to retrieve all the box divs and get the array length:
var columns = document.getElementsByClassName('box').length
I think you are missing the minmax part of the grid-template-columns:
eg grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
with out it, you will always have 7 columns, and the grid columns wont be responsive and change as page width shrinks/expands.
can see Jen Simmons example page here : Spice Gallery Layout
A Solution that doesnt require any javascript.. but a few media queries..
is to wrap your .wrapper div with a container. and set a max height. per screen break point when every there would be un even images on the last row.
then set the .container overflow-y:hidden;
link to pen here : Hide last row of grid with css
Doing this with javascript you would need to know how many images you have, and what your minmax column widths are. vw units are basicaly width in %. so you would need to do some maths. with a mod function to know how many items are on the last row. and then need a way to hide them.
Related
So how would I make a static layout for a seat-booking application with a maximum of 20 seats per row without changing the layout when resizing the window ? I'm working on a react project and I would like to have a variable amount of seats, but the seats layout can't change when resizing. This wouldn't make sense when trying to book a seat.
I gathered information that this is possible using grid and or flexbox. I've tried using flex-wrap but using flex-wrap changes the layout. Not using flex-wrap causes the seats to overflow to the side of the div.
The code looks something like this
<Section>
<div>
<Chair>
<Chair>
<div/>
<div>
<Chair>
<Chair>
<div/>
<div>
<Chair>
<Chair>
<div/>
<Section/>
What I want
What I have
Hoping someone can give me a tip in the right direction.
I've tried using flexbox, grid, but none of them worked like I wanted them too. Gridbox gave me a good layout but broke when resizing. Flexbox hasn't helped much.
In order to make 20 seats per row without changing the layout when resizing the window, you can use a CSS grid. And then use grid-template-columns property to define how many columns that needed to occupy one row.
To demonstrate, I define 20 div elements in one parent element and then using grid-template-columns property I arranged 10 divs in to one row. For your case changed that value to 20.
.grid-container {
display: grid;
grid-template-columns: repeat(10, 1fr) ;
}
.grid-item {
border: 1px solid black;
font-size: 12px;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
<div class="grid-item">10</div>
<div class="grid-item">11</div>
<div class="grid-item">12</div>
<div class="grid-item">13</div>
<div class="grid-item">14</div>
<div class="grid-item">15</div>
<div class="grid-item">16</div>
<div class="grid-item">17</div>
<div class="grid-item">18</div>
<div class="grid-item">19</div>
<div class="grid-item">20</div>
</div>
I need some help setting up a column-based grid for flexible layout. I am hoping to use flexbox primarily, but have been unable to figure out how to implement exactly what I need. I am also open to using a JS grid plugin, but again have not found one that meets me specific needs.
Here is a photo that illustrates what I'm hoping to build.
Grid Illustration
The most important priorities are:
The layout creates as many columns as possible within the master content container.
After organizing the content blocks in columns, resize each content block so that each column's height is uniform.
The height of the master content container's height scales fit content within.
Having the elements display in order is preferable, but not mandatory.
I also want the width of the content container to scale based on device. So predictably when it goes down to mobile it becomes a simple one column layout.
Now I believe I can control the number of grids by setting the container width, and content block width specifically based on device. I.e. if it's on mobile the content blocks are 100% width, and if it is on desktop the container is 900px and the content blocks are 300px.
That plus flexbox should give me something that resembles this. Flexbox Illustration, but only if I set a fixed height on the master container, which is not ideal.
So my question is, is there a way to setup flexbox to achieve my goals? If, not is there JS plugin that is capable of doing this?
HTML
<div id="blocks">
<div class="block">
<div class="info" style="height:280px"></div>
</div>
<div class="block">
<div class="info" style="height:280px"></div>
</div>
<div class="block">
<div class="info" style="height:280px"></div>
</div>
<div class="block">
<div class="info" style="height:600px"></div>
</div>
<div class="block">
<div class="info" style="height:400px"></div>
</div>
<div class="block">
<div class="info" style="height:300px"></div>
</div>
</div>
CSS
#blocks{
display:flex;
flex-direction:column;
justify-content: flex-start;
align-items:flex-start;
flex-wrap:wrap;
background-color: #ddd;
width:900px;
height:900px;
}
.info{
position:relative;
width:80%;
background-color: #888;
margin: 5px 0px;
}
.block{
width:290px;
background-color: #ddd;
border: 1px solid black;
flex: 1 0 auto;
display:flex;
flex-direction:column;
justify-content: center;
align-items:center;
}
CodePen
Is it possible to create this page layout with css alone? if so what is the best way to go about it? floating puts all block level elements aligned to the last page break along the top, display:inline-block just aligns up along the bottom. Neither create the alineation model from the image below.
I know I could position them manually but the divs are filled with content from a data base so they will need to adjust automatically and align this way independently of their size. I thought about calculating all their heights with javascript and positioning them dynamically this way, but I've got this feeling that there might be a simple way of doing this that I'm totally overlooking. any ideas?
I guess you are looking for a layout similar to Pinterest, so the first Google search returned this example. There are a lot of other results, so I am sure one should fit your needs if you search yourself.
Have 3 columns, and fill the blocks in them,
Something like this,
Skeleton:
<div class="column-container">
<div class="column-1">
<div class="block">...</div>
<div class="block">...</div>
</div>
<div class="column-2">
<div class="block">...</div>
<div class="block">...</div>
<div class="block">...</div>
<div class="block">...</div>
</div>
<div class="column-3">
<div class="block">...</div>
<div class="block">...</div>
<div class="block">...</div>
</div>
</div>
css:
.column-1, .column-2, .column-3{
float:left;
width:200px;
height:auto;
}
.block{
display:block;
width:180px;
}
And the blocks you add to each column will go sit below one another. Simple.
Updated response:
Flexbox almost does what you want (as does something like I posted below) but if you're ordering must be left-to-right and it must tight-fit vertically as in your mock - perhaps consdier something like http://masonry.desandro.com/?
Original response:
Maybe try something like this?
.container {
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-fill: auto;
-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-fill: auto;
column-count: 3;
column-gap: 15px;
column-fill: auto;
}
.container div {
display: inline-block;
width: 200px;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
margin-bottom: 10px;
}
Here: http://jsfiddle.net/bvaughn/rrpg58yy/
Bootsrap is the one I recommend, u simply add the reference to your file (or project) and then it's really easy to design the layout that you want, after you implement Bootstrap, your code will look like this:
<div class="container">
<div class="col-lg-3">
<div class="row">
<div>some data 1</div>
</div>
<div class="row">
<div>some data 2</div>
</div>
<div class="row">
<div>some data 3</div>
</div>
</div>
<div class="col-lg-3">....
Fiddle
Make sure you resize your page, since bootstrap stacks all the divs together for smaller (mobile) screens
I've been trying to make my Bootstrap columns the equal size and have been failing. Using CSS or JavaScript, how can I accomplish this?
Bootply Example
CSS:
#grid-selector .container {
max-width: 400px;
}
#grid-selector [class*="col-"] {
border: 1px solid #000;
text-align: center;
padding: 20px;
}
HTML:
<div id="grid-selector">
<div class="container">
<div class="row">
<div class="col-xs-6">Section 1<br>Space</div>
<div class="col-xs-6">Section 2</div>
</div>
<div class="row">
<div class="col-xs-6">Section 3</div>
<div class="col-xs-6">Section 4</div>
</div>
<div class="row">
<div class="col-xs-3">Section 5</div>
<div class="col-xs-3">Section 6</div>
<div class="col-xs-6">Section 7</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="row man">
<div class="col-xs-12">Section 8</div>
</div>
<div class="row man">
<div class="col-xs-12">Section 9</div>
</div>
</div>
<div class="col-xs-6">Section 10</div>
</div>
<div class="row">
<div class="col-xs-12">Section 11</div>
</div>
</div>
</div>
tadaaa! Super FLEX to the rescue!
#grid-selector .container {
}
#grid-selector .row {
display:flex;
align-items:stretch !important;
}
#grid-selector [class*="col-"] {
border: 1px solid #000;
text-align: center;
padding: 20px;
min-height:100%;
}
And I even made your example fully responsive instead of fixed width, just because I can ;) .
No, really, I did it to show you it could easily be responsive, but if you want it to be fixed , just add all this code inside a container div (do NOT limit the container width as you did!)
see to understand it visually http://www.bootply.com/Wypyz5PaSN and play around
and read more about FLEX MODEL at Mozilla MDN
The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements
behave predictably when the page layout must accommodate different
screen sizes and different display devices. For many applications, the
flexible box model provides an improvement over the block model in
that it does not use floats, nor do the flex container's margins
collapse with the margins of its contents.
Many designers will find the flexbox model easier to use. Child elements in a flexbox can be laid out in any direction and can have
flexible dimensions to adapt to the display space. Positioning child
elements is thus much easier, and complex layouts can be achieved more
simply and with cleaner code, as the display order of the elements is
independent of their order in the source code. This independence
intentionally affects only the visual rendering, leaving speech order
and navigation based on the source order.
The easiest way to accomplish this is to create an additional CSS class which is shared between the columns in each row.
In this class, you'd want to define a min-height.
<div class="container">
<div class="row">
<div class="col-xs-6 row1">Section 1<br>Space</div>
<div class="col-xs-6 row1">Section 2</div>
</div>
</div>
You would then define your CSS as follows
.row1{
min-height: 100px;
}
The reason you'd want to be using min-height as opposed to height, is to retain the responsiveness when you reduce the size of the window. If you were to then do only height, as opposed to min height, as soon as the site becomes smaller, the objects cannot fit inside the div, and don't perform properly.
I have a template based on fluid example here:
http://twitter.github.io/bootstrap/examples/fluid.html
I have the latest files from here, the only customizations being colors:
http://twitter.github.io/bootstrap/customize.html
The basic markup is
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<div class="well sidebar-nav">
Column 1
</div><!--/.well -->
</div><!--/span-->
<div class="span9">
Column 2
</div><!--/span-->
</div><!--/row-->
</div>
Column 2 falls under column 1 on mobile devices, which is what I want sometimes. But in some cases (specific pages) I want the 2 columns to remain side by side. My question is how do I achieve this with the same js/css files?
Here's one possibility: http://jsfiddle.net/panchroma/RMPMA/
You will see that the columns don't drop on the row with class = double-col
CSS
#media (max-width: 767px){
.double-col.row-fluid [class*="span"] {
float: left;
width: 50%;
}
}
Since this resets the width of each col to 50% on viewpoints 767px and below, this will work with rows having two columns. For other combinations, simply play with the width setting. You might also want refine the padding and other styling, but easy enough now.
Hope this helps!