There is a .classes block with grid styles, but its .class children (which contain the slider block) are larger than necessary. That is, if you place three blocks in a row, they will go beyond the boundaries of the parent block.
css:
.classes {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2em;
}
.class {
padding: 1em;
background-color: var(--second);
height: 13em;
display: flex;
flex-direction: column;
gap: .5em;
border-radius: .5em;
}
.class-footer-block {
height: 100%;
padding: .5em 0 0 0;
}
.class-personal-estimates {
display: flex;
align-items: center;
height: 100%;
width: 100%;
gap: .5em;
overflow: auto;
}
[class^="estimate"] {
min-width: 1em;
background-color: green;
border-radius: .2em;
}
html:
<body>
<header data-include="header"></header>
<main>
<div class="classes">
<div data-include="class-plate">
<div id="class" class="class">
<div class="class-header-block">
<h2>ДО К-28</h2>
<button class="class-action-btn">
<i class="three-dot-icon"></i>
</button>
</div>
<div class="class-middle-block">
<span class="class-description">
Анализ данных (лаб занятия) 1234567898765432
</span>
<span class="class-owner">
Alexander Slabospitsky
</span>
</div>
<div class="class-footer-block">
<div class="class-personal-estimates">
<div class="estimate1"></div>
<div class="estimate2"></div>
<div class="estimate3"></div>
<div class="estimate1"></div>
<div class="estimate3"></div>
<div class="estimate1"></div>
<div class="estimate2"></div>
<div class="estimate1"></div>
<div class="estimate2"></div>
<div class="estimate3"></div>
<div class="estimate1"></div>
<div class="estimate3"></div>
<div class="estimate1"></div>
<div class="estimate2"></div>
<div class="estimate1"></div>
<div class="estimate2"></div>
<div class="estimate3"></div>
<div class="estimate1"></div>
<div class="estimate3"></div>
<div class="estimate1"></div>
<div class="estimate2"></div>
</div>
</div>
</div>
</div>
<div data-include="class-plate"></div>
<div data-include="class-plate"></div>
<div data-include="class-plate"></div>
</div>
</main>
<footer>
</footer>
</body>
Other <div data-include="class-plate"></div> contain the same as the first
if limit .class-footer-block (for example width: 20em;) everything will be fine, but not as I need. I need to reach the maximum width of this .class-footer-block, but so that it does not go beyond the boundaries
jsfiddle link for demonstrate problem https://jsfiddle.net/mplaksyuk/4w1qn5em/3/
Related
I am trying to align-bottom a button in the 2 column. I tried almost everything including position:absolute and relative.
Here a link explaining what I am doing https://www.beerstrot.it/cavecchia.github.io/colonna.html.
It seems the only way to do it is using grid-template with 2 row on the second column.
Here html code:
<div class="grid-container extra-space">
<div class="grid-x grid-margin-x">
<div class="cell">
<h2>Can i vertically align bottom the blue button?</h2>
</div>
</div>
<div class="grid-x grid-margin-x grid-margin-y">
<div class="cell">
<div class="wrapper">
<div>
<img src="https://picsum.photos/1920/1920" alt="Roll Ca' Vecchia Beerstrot">
</div>
<div class="box">
<h3>Hi there,</h3>
<p>button align bottom?</p>
<button type="button" class="button small align-self-bottom" style="margin-bottom: 0;">Aggiungi al Carrello</button>
</div>
</div>
</div>
<div class="cell">
<div class="wrapper">
<div class="box-image">
<img src="https://picsum.photos/1920/1920" alt="Roll Ca' Vecchia Beerstrot">
</div>
<div class="box">
<h3>Hi there,</h3>
<p>I am a much longer desription and it is ok the button is at the very end of the container so no need to push it at the end. <br>Well actually since i am a test i do add to the height of the container so the container is bigger and i go deep down to the earth</p>
<div class="">
<button type="button" class="button small" style="margin-bottom: 0;">Aggiungi al Carrello</button>
</div>
</div>
</div>
</div>
<div class="cell">
<h2>If I use grid-template it works</h2>
</div>
<div class="cell"></div>
<div class="cell">
<section id="page">
<div class="item-image"><img src="https://picsum.photos/1920/1920" alt="Roll Ca' Vecchia Beerstrot"></div>
<div class="item-text">
<h3>Hi there,</h3>
<p>button align bottom?</p>
</div>
<div class="item-button">
<button type="button" class="button small" style="margin-bottom: 0;">Aggiungi al Carrello</button>
</div>
</section>
</div>
<div class="cell">
<section id="page">
<div class="item-image"><img src="https://picsum.photos/1920/1920" alt="Roll Ca' Vecchia Beerstrot"></div>
<div class="item-text">
<h3>Hi there,</h3>
<p>I am a much longer desription and it is ok the button is at the very end of the container so no need to push it at the end. <br>Well actually since i am a test i do add to the height of the container so the container is bigger and i go deep down to the earth</p>
</div>
<div class="item-button">
<button type="button" class="button small" style="margin-bottom: 0;">Aggiungi al Carrello</button>
</div>
</section>
</div>
</div>
Here the CSS:
//test not working
.wrapper {
display: grid;
grid-template-columns: minmax(140px, 1fr) 3fr;
grid-auto-rows: min-content;
gap: 20px;
margin-top: 2rem;
margin-bottom: 0;
padding-bottom: 1rem;
background: rgba(lightpink, 0.4);
}
.box {
grid-column-start: 2;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 1;
background-color: rgba(green, 0.2);
margin-bottom: 0;
padding-bottom: 0;
}
//test grid-templates and it works
#page {
display: grid;
grid-template: "item-image item-text" 3fr
"item-image item-button" auto;
grid-template-columns: minmax(140px, 1fr) 3fr;
column-gap: 20px;
background: rgba(lightpink, 0.4);
.item-image {
background-color: rgba(lightblue, 0.4);
grid-area: item-image;
}
.item-text {
background-color: rgba(yellow, 0.4);;
grid-area: item-text;
}
.item-button {
background-color: rgba(red, 0.4);
grid-area: item-button;
margin:0;
padding:0;
}
}
Many thanks in advance
I tried to vertically align bottom an element inside a row using Flexbox properties, but I was not able to find a solution.
<div class="grid-container extra-space">
<div class="grid-x grid-margin-x">
<div class="cell">
<h2>Can i vertically align bottom the blue button?</h2>
</div>
</div>
<div class="grid-x grid-margin-x grid-margin-y">
<div class="cell">
<div class="wrapper">
<div>
<img height="150px" src="https://picsum.photos/1920/1920" alt="Roll Ca' Vecchia Beerstrot">
</div>
<div class="box">
<h3>Hi there,</h3>
<p>button align bottom?</p>
<button type="button" class="button small align-self-bottom" style="margin-bottom: 0;">Aggiungi al Carrello</button>
</div>
</div>
</div>
<div class="cell">
<div class="wrapper">
<div class="box-image">
<img height="150px" src="https://picsum.photos/1920/1920" alt="Roll Ca' Vecchia Beerstrot">
</div>
<div class="box">
<h3>Hi there,</h3>
<p>I am a much longer desription and it is ok the button is at the very end of the container so no need to push it at the end. <br>Well actually since i am a test i do add to the height of the container so the container is bigger and i go deep down to the earth</p>
<div class="">
<button type="button" class="button small" style="margin-bottom: 0;">Aggiungi al Carrello</button>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
.wrapper {
display: grid;
grid-template-columns: minmax(140px, 1fr) 3fr;
grid-auto-rows: min-content;
gap: 20px;
margin-top: 2rem;
margin-bottom: 0;
padding-bottom: 1rem;
background: rgba(255, 182, 193, 0.178);
}
.box {
grid-column-start: 2;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 1;
background-color: rgba(0, 128, 0, 0.155);
margin-bottom: 0;
padding-bottom: 0;
}
</style>
How can I put this View More button in the bottom-right of the container? I am having a hard time on putting the view more button on the bottom right of the 'back' div.
.back {
border: #6ACEBC 4px solid;
margin: 0 20px;
border-radius: 15px;
max-width: 100%!important;
min-height: 200px;
}
.content {
max-width: 60%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="back">
<div class="content">
<div class="row ps-3 text-center">
<div class="col">Order #</div>
<div class="col">Order Name</div>
<div class="col">Quantity</div>
<div class="col">Price per pcs</div>
<div class="col">Total Price</div>
</div>
<div class="row ps-3 text-center">
<div class="col">3</div>
<div class="col">Pencil</div>
<div class="col">5</div>
<div class="col">10</div>
<div class="col">50</div>
</div>
<div class="float-end">
<button>VIEW MORE</button>
</div>
</div>
</div>
Use absolute positioning to place the button on the bottom right of the container. The container needs to be position: relative; to get the context of the button in the right place.
.back {
border: #6ACEBC 4px solid;
margin: 0 20px;
border-radius: 15px;
max-width: 100%!important;
min-height: 200px;
background-color: darkorange;
position: relative;
}
.content {
max-width: 60%;
}
button {
position: absolute;
bottom: 10px;
right: 10px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class = "back">
<div class="content">
<div class="row ps-3 text-center">
<div class="col">Order #</div>
<div class="col">Order Name</div>
<div class="col">Quantity</div>
<div class="col">Price per pcs</div>
<div class="col">Total Price</div>
</div>
<div class="row ps-3 text-center">
<div class="col">3</div>
<div class="col">Pencil</div>
<div class="col">5</div>
<div class="col">10</div>
<div class="col">50</div>
</div>
<div class = "float-end">
<button>VIEW MORE</button>
</div>
</div>
</div>
You can use position: absolute. Create a new containing block with position: relative on the parent however this takes the button outside of the flow so you may end up with other elements clashing with it (e.g. the button appearing over text content).
.back {
border: #6ACEBC 4px solid;
margin: 0 20px;
border-radius: 15px;
max-width: 100%!important;
min-height: 200px;
position: relative; /* create new containing block */
}
.content {
max-width: 60%;
}
.view-more {
position: absolute;
bottom: 1rem;
right: 1rem;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="back">
<div class="content">
<div class="row ps-3 text-center">
<div class="col">Order #</div>
<div class="col">Order Name</div>
<div class="col">Quantity</div>
<div class="col">Price per pcs</div>
<div class="col">Total Price</div>
</div>
<div class="row ps-3 text-center">
<div class="col">3</div>
<div class="col">Pencil</div>
<div class="col">5</div>
<div class="col">10</div>
<div class="col">50</div>
</div>
<div class="view-more">
<button>VIEW MORE</button>
</div>
</div>
</div>
The other way is to move your view-more div outside the content div and then use display: flex to move it to the bottom right hand corner. We make sure the div fills the parent div. This will always make sure the table above and the button do not clash.
.back {
border: #6ACEBC 4px solid;
margin: 0 20px;
border-radius: 15px;
max-width: 100%!important;
min-height: 200px;
display: flex; /* make this a flex container */
flex-direction: column; /* make the flex divs stack on top of each other rather than side by side */
}
.content {
max-width: 60%;
}
.view-more {
flex-grow: 1; /* make the bottom div grow to fill the container */
display: flex; /* make this a flex container also */
justify-content:flex-end; /* put the button to the right hand side of the parent div */
align-items: flex-end; /* put the button at the bottom of the div */
padding:0.5rem; /* put a bit of padding round it to put some space between the green border and the button */
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="back">
<div class="content">
<div class="row ps-3 text-center">
<div class="col">Order #</div>
<div class="col">Order Name</div>
<div class="col">Quantity</div>
<div class="col">Price per pcs</div>
<div class="col">Total Price</div>
</div>
<div class="row ps-3 text-center">
<div class="col">3</div>
<div class="col">Pencil</div>
<div class="col">5</div>
<div class="col">10</div>
<div class="col">50</div>
</div>
</div>
<div class="view-more">
<button>VIEW MORE</button>
</div>
</div>
Have you tried adding "position: relative" to the container and then positioning the button absolutely?
.back {
border: #6ACEBC 4px solid;
margin: 0 20px;
border-radius: 15px;
max-width: 100%!important;
min-height: 200px;
position: relative;
}
.content {
max-width: 60%;
font-size: 5px;
}
.float-end {
position: absolute;
right: 0;
bottom: 0;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class ="back">
<div class="content">
<div class="row ps-3 text-center">
<div class="col">Order #</div>
<div class="col">Order Name</div>
<div class="col">Quantity</div>
<div class="col">Price per pcs</div>
<div class="col">Total Price</div>
</div>
<div class="row ps-3 text-center">
<div class="col">3</div>
<div class="col">Pencil</div>
<div class="col">5</div>
<div class="col">10</div>
<div class="col">50</div>
</div>
</div>
<div class="float-end">
<button>VIEW MORE</button>
</div>
</div>
I want to acheive this design any next category will automatically adjust to the previous div. Every category have not specific product but need to just after the previous product like we use float left or display-flex But don't want to create multiple css for responsive. Because it has more than 25 categories. `
.offerpage .product-box {
margin: 0 5px;
}
.categoryProductsWrap{
width: 100%;
}
.product-img{
width: 100%;
}
.categoryProductsWrap .categoryProducts {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.categoryProductsWrap .categoryProducts .product-box {
margin-bottom: 10px;
float: left;
}
.offerpage .categoryName {
color: #161719;
font-size: 24px;
font-weight: bold;
margin-bottom: 0.5em;
border-bottom: solid 1px #dddddd;
padding-bottom: 0.125em;
}
.img-box{
position: relative;
padding-top: 124%;
display: inline-block;
width: 100%;
vertical-align: top;
}
.product-box .product-img{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
.txt-content {
overflow: hidden;
position: relative;
}
.img-box{
position: relative;
padding-top: 124%;
display: inline-block;
width: 100%;
vertical-align: top;
}
.offerpage{
display: flex;
flex-wrap: wrap;
}
.categoryProductsWrap .categoryProducts .product-box{
width: 33.333%
}
#media (min-width: 1200px){
.categoryProductsWrap.cooling_fan {
width: 50%;
}
.categoryProductsWrap.accessories {
width: 50%;
}
}
#media (min-width: 1440px){
.categoryProductsWrap.accessories .categoryProducts .product-box,
.categoryProductsWrap.cooling_fan .categoryProducts .product-box {
width: calc(50% - 10px);
}
}
<div class="offerpage">
<div class="categoryProductsWrap accessories">
<div class="categoryName">Accessories</div>
<div class="categoryProducts clearfix offerzone-slider products-wrapper">
<div class="product-box">
<div class="product-inner-box">
<div class="txt-content">
<div class="img-box">
<a href="#" class="product-thumbnail">
<img class="product-img img-responsive" src="https://picsum.photos/400">
</a>
</div>
</div>
</div>
</div>
<div class="product-box">
<div class="product-inner-box">
<div class="txt-content">
<div class="img-box">
<a href="#" class="product-thumbnail">
<img class="product-img img-responsive" src="https://picsum.photos/400">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="categoryProductsWrap cooling_fan">
<div class="categoryName">Cooling Fan</div>
<div class="categoryProducts clearfix offerzone-slider products-wrapper">
<div class="product-box">
<div class="product-inner-box">
<div class="txt-content">
<div class="img-box">
<a href="#" class="product-thumbnail">
<img class="product-img img-responsive" src="https://picsum.photos/400">
</a>
</div>
</div>
</div>
</div>
<div class="product-box">
<div class="product-inner-box">
<div class="txt-content">
<div class="img-box">
<a href="#" class="product-thumbnail">
<img class="product-img img-responsive" src="https://picsum.photos/400">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="categoryProductsWrap asus">
<div class="categoryName">Asus</div>
<div class="categoryProducts clearfix offerzone-slider products-wrapper">
<div class="product-box">
<div class="product-inner-box">
<div class="txt-content">
<div class="img-box">
<a href="#" class="product-thumbnail">
<img class="product-img img-responsive" src="https://picsum.photos/400">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="categoryProductsWrap audio">
<div class="categoryName">Audio Device</div>
<div class="categoryProducts clearfix offerzone-slider products-wrapper">
<div class="product-box">
<div class="product-inner-box">
<div class="txt-content">
<div class="img-box">
<a href="#" class="product-thumbnail">
<img class="product-img img-responsive" src="https://picsum.photos/400">
</a>
</div>
</div>
</div>
</div>
<div class="product-box">
<div class="product-inner-box">
<div class="txt-content">
<div class="img-box">
<a href="#" class="product-thumbnail">
<img class="product-img img-responsive" src="https://picsum.photos/400">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`
If you want to use CSS grid, there no big difficulties simply check the documentation to understand the main CSS properties you need to add.
Also check this guide on CSS grid to undertand more and see examples.
Quick help
If I understand correctly you want 3 items max per row, to do that you will need to set:
grid-template-columns: repeat(3, 1fr);
The equivalent to flex-direction: row; is grid-auto-flow: row;
You will I presume also need a gap (spacing between items), something like that:
gap: 10px;
So a good starting point will be:
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row;
gap: 10px;
I leave you do the rest according to your needs.
Can I prevent child .title(pink one) from stretching the parent flex and force it to wrap words? This layout works perfectly when the .values are stretched vertically, but on wide screen I would like .title to take as less height as possible (in most cases it will contain 1-3 words)
html,
body {
background: #333;
font-family: Arial;
}
.section {
display: flex;
justify-content: space-between;
}
.section .values {
display: flex;
background: #333;
color: white;
flex-wrap: wrap;
}
.section .values .col {
border: 1px solid #F012BE;
justify-content: center;
text-align: center;
}
.section .values .col>div {
padding: 5px;
border: 1px solid #39CCCC;
}
.section .title {
background: #F012BE;
color: #333;
writing-mode: vertical-rl;
transform: rotate(180deg);
border-left: 2px solid #39CCCC;
}
<div class="section">
<div class="values">
<div class="col">
<div class="original">1</div>
<div class="processed">3</div>
</div>
<div class="col">
<div class="original">4</div>
<div class="processed">5</div>
</div>
<div class="col">
<div class="original">6</div>
<div class="processed">2</div>
</div>
<div class="col">
<div class="original">6</div>
<div class="processed">5</div>
</div>
<div class="col">
<div class="original">4</div>
<div class="processed">6</div>
</div>
<div class="col">
<div class="original">7</div>
<div class="processed">2</div>
</div>
<div class="col">
<div class="original">6</div>
<div class="processed">5</div>
</div>
<div class="col">
<div class="original">4</div>
<div class="processed">6</div>
</div>
<div class="col">
<div class="original">5</div>
<div class="processed">6</div>
</div>
<div class="col">
<div class="original">72</div>
<div class="processed">9</div>
</div>
<div class="col">
<div class="original">5</div>
<div class="processed">7</div>
</div>
<div class="col">
<div class="original">6</div>
<div class="processed">5</div>
</div>
<div class="col">
<div class="original">5</div>
<div class="processed">7</div>
</div>
</div>
<div class="title">What if title will be long?</div>
</div>
I'm trying to achieve something like the following page:
https://undsgn.com/uncode/homepages/blog-metro/
I have tried and was able to come as close as this: https://jsfiddle.net/futu7t1c/
But how can I get those 2 small-thumbs at the bottom to move up?
The order is big, small, small, big, small, small
<div id="blog-posts">
<div class="grid big-thumb">
Title
</div>
<div class="grid small-thumb">
Title
</div>
<div class="grid small-thumb">
Title
</div>
<div class="grid big-thumb">
Title
</div>
<div class="grid small-thumb">
Title
</div>
<div class="grid small-thumb">
Title
</div>
</div>
css
#blog-posts {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
-moz-column-gap: 0em;
-webkit-column-gap: 0em;
column-gap: 0em;
}
.grid {
background: #eee;
float: left;
position: relative;
color: #fff;
}
.big-thumb {
width: 50%;
height: 600px;
background: #aeaeae;
}
.small-thumb {
width: 25%;
height: 300px;
background: #353535;
}
To replicate that grid, you can make flex rows that have flex children that are also flex columns holding your images.
.flex {
display: flex;
}
.col {
flex-direction: column;
flex: 0 0 50%;
}
img {
max-width: 100%;
vertical-align: top;
}
<div class="flex row">
<div class="flex col">
<div class="big">
<img src="http://1.bp.blogspot.com/-hNC-oT6f-fY/TeXxO26yjvI/AAAAAAAAAOY/qfkOqdKkBi8/s1600/platon-photographer-putin-man-of-the-year-portrait.jpg">
</div>
<div class="flex row">
<div class="small">
<img src="https://i.stack.imgur.com/2C22p.jpg">
</div>
<div class="small">
<img src="https://i.stack.imgur.com/2C22p.jpg">
</div>
</div>
</div>
<div class="flex col">
<div class="flex row">
<div class="small">
<img src="https://i.stack.imgur.com/2C22p.jpg">
</div>
<div class="small">
<img src="https://i.stack.imgur.com/2C22p.jpg">
</div>
</div>
<div class="big">
<img src="http://1.bp.blogspot.com/-hNC-oT6f-fY/TeXxO26yjvI/AAAAAAAAAOY/qfkOqdKkBi8/s1600/platon-photographer-putin-man-of-the-year-portrait.jpg">
</div>
</div>
Well, that's how you'd do it using regular ol' html/css. But since you want to just have a bunch of elements that automatagically lay out like that, use masonry
$('.masonry').masonry({
itemSelector: '.item',
columnWidth: '.small'
});
body {
margin: 0;
}
.item {
float: left;
}
.big {
width: 50%;
}
.small {
width: 25%;
}
img {
width: 100%;
vertical-align: top;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout#4/dist/masonry.pkgd.min.js"></script>
<div class="masonry">
<div class="item big">
<img src="http://1.bp.blogspot.com/-hNC-oT6f-fY/TeXxO26yjvI/AAAAAAAAAOY/qfkOqdKkBi8/s1600/platon-photographer-putin-man-of-the-year-portrait.jpg">
</div>
<div class="item small">
<img src="https://i.stack.imgur.com/2C22p.jpg">
</div>
<div class="item small">
<img src="https://i.stack.imgur.com/2C22p.jpg">
</div>
<div class="item big">
<img src="http://1.bp.blogspot.com/-hNC-oT6f-fY/TeXxO26yjvI/AAAAAAAAAOY/qfkOqdKkBi8/s1600/platon-photographer-putin-man-of-the-year-portrait.jpg">
</div>
<div class="item small">
<img src="https://i.stack.imgur.com/2C22p.jpg">
</div>
<div class="item small">
<img src="https://i.stack.imgur.com/2C22p.jpg">
</div>
</div>