I have a design with 12 columns and a gap between them.
How can I code using TailwindCSS to fit guidelines for width by columns as well as align elements on separate rows?
For example, I need to have 3 rows, and each row's width is specified per amount of columns:
|O|O|O|O|O|O|X|X|X|X|X|X|
|O|O|O|O|X|X|X|X|X|X|X|X|
|O|O|X|X|X|X|X|X|X|X|X|X|
1st row takes 6 columns,
2nd row takes 4 columns and
3rd row takes 2 columns
I figured out that I can split it into separate elements and provide grid-cols-12 per each row, e.g.:
<div class="grid grid-cols-12">
<div class="col-span-6">
<h1 class="text-5xl text-white font-bold mb-3.5">lorem ipsum dolor</h1>
</div>
</div>
<div class="grid grid-cols-12">
<div class="col-span-4">
<p class="text-lg text-white mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer blandit velit vel dolor pharetra, a placerat justo euismod.</p>
</div>
</div>
<div class="grid grid-cols-12">
<div class="col-span-2 text-left">
Learn more
</div>
</div>
Or I can change grid-flow to column and provide number of rows, e.g.:
<div class="grid grid-flow-col grid-rows-3 grid-cols-12">
<div class="col-span-6">
<h1 class="text-5xl text-white font-bold mb-3.5">lorem ipsum dolor</h1>
</div>
<div class="col-span-4">
<p class="text-lg text-white mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer blandit velit vel dolor pharetra, a placerat justo euismod.</p>
</div>
<div class="col-span-2 text-left">
Learn more
</div>
</div>
But this way I always need to keep in mind that after adding a new element/row I need to change also class from grid-rows-3 to grid-rows-4 and etc. As well as all rows get the same height, but I need so it would be calculated dynamically
Is there more accurate approach to create 3 rows and manage each row width by `col-span-..``?
Related
I have a row with 2 columns. I want the height of the row to be based solely on the content of column 1. The content of column 2 should be truncated if necessary.
<div class="container">
<div class="row">
<div class="col-3" style="background-color: yellow;">Lorem, ipsum dolor.</div>
<div class="col-9" style="background-color: blue;">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora, vitae!</div>
</div>
In the example it happens with some widths that the 2nd column breaks, the first not yet. This should be avoided.
The background is that there is an image in the first column that should always fill the full height of the row. The text in column 2 is a preview text and should be shortened if necessary.
Wrap the content of the column in a absolute position div, and use overflow-auto if you want it to be scrollable...
<div class="container">
<div class="row">
<div class="col-3" style="background-color: yellow;"><img src="//via.placeholder.com/200x50"></div>
<div class="col-9 position-relative" style="background-color: blue;">
<div class="position-absolute overflow-auto top-0 bottom-0 start-0 end-0">Lorem ipsum dolor sit amet consectetur, dolor sit amet consectetur, adipisicing elit. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora, vitae!</div>
</div>
</div>
</div>
https://codeply.com/p/TGtv6KDKvD
Also see: bootstrap 4 row height set by specific col - not highest one
What I want to achieve is to make the the columns with number 1 and 2 independent from the height size of the column with text, so if added later on another div it will be directly placed under the first 2 columns without skipping any empty gaps because of the third column long height,
like this:
Columns with gap
Columns without gap
I tried this but it didn't work.
<div class="row text-center ">
<div class="col-9 ">
<div class="row border">
<div class="col-9 border">1</div>
<div class="col-3 border">2</div>
</div>
</div>
<div class="col-3 border">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
</div>
Thanks for any help.
I think you can use align-items Property in CSS Flexbox Layout!!
using FOUNDATION 6.
Have 3 columns, each has:
image (always same size)
title (varies in length )
text (varies in length )
button
How can I have them all align horizontally throughout the colums?
This is current situation:
current situation
What I need:
enter image description here
Current code for this section:
<div class="row small-up-1 medium-up-3 large-up-3 " data-equalizer="prodMain" >
<div class="column" data-equalizer-watch="prodMain" >
<img class="thumbnail" src="http://img1.10bestmedia.com/Images/Photos/96123/captiva-beach-captiva_54_990x660_201404211817.jpg" />
<h5>Lorem ipsum ipsum ipsum</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.</p>
ABOUT THE LOREM
</div>
<div class="column" data-equalizer-watch="prodMain">
<img class="thumbnail" src="http://img1.10bestmedia.com/Images/Photos/96123/captiva-beach-captiva_54_990x660_201404211817.jpg" />
<h5>Lorem ipsum</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.</p>
ABOUT THE LOREM Y
</div>
<div class="column" data-equalizer-watch="prodMain">
<img class="thumbnail" src="http://img1.10bestmedia.com/Images/Photos/96123/captiva-beach-captiva_54_990x660_201404211817.jpg" />
<h5>Lorem ipsum & Lorem ipsum </h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.</p>
ABOUT OUR LOREM
</div>
</div><!--/ -->
If you want to use jquery you could try including a class like same-height to your html, then testing with jquery
HTML (add the extra class name same-height)
<div class="row small-up-1 medium-up-3 large-up-3 same-height" data-equalizer="prodMain" >
Javascript
$(function() {
function getLargest(elements) {
largest = 0;
$(elements).each(function(i, obj) {
if($(this).height() > largest) {
largest = $(this).height();
}
});
return largest;
}
function setHeights(elements, largest) {
$(elements).each(function(i, obj) {
$(this).height(largest);
});
}
var largest = getLargest('.same-height h5');
setHeights('.same-height h5', largest);
var largest = getLargest('.same-height p');
setHeights('.same-height p', largest);
});
Works fine but if you want to resize the browser or limit to certain screen sizers you would need extra code.
Right now I have two divs using "one-half columns" class.
As you can see here, the bottom card on the left side is still aligned with the one on the bottom right.
I want Pinterest kind of style like this, but I do not know how because they are in different rows.
here is my html code.
<div class="container">
<div class="row">
<div id="cards" class="one-half column" style="margin-top: 25%">
<img class="card-image" src="img/sample.png">
<div class="title">
<h4>Stealth Rats</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit eu nibh vitae maximus.</p>
</div>
</div>
<div id="cards" class="one-half column" style="margin-top: 25%">
<img class="card-image" src="img/sample.png">
<div class="title">
<h4>Basic Page</h4>
<p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the Skeleton documentation.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit eu nibh vitae maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a mollis arcu.</p>
</div>
</div>
</div>
<div class="row">
<div id="cards" class="one-half column" style="margin-top: 5%">
<img class="card-image" src="img/sample.png">
<h4>Basic Page</h4>
<p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the Skeleton documentation.</p>
</div>
<div id="cards" class="one-half column" style="margin-top: 5%">
<img class="card-image" src="img/sample.png">
<h4>Basic Page</h4>
<p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the Skeleton documentation.</p>
</div>
Thanks in advance!
You can't do it in plain css unless you work with columns instead of rows (and that breaks content importance).
What you want is Masonry or another javascript alternative.
Also, your html has errors, you cannot use the same id more than once. Change it to class='cards' and if you want to use masonry you have to put every card inside the same div, so in this case, inside the same row.
Then you can call it
$('.row').masonry({
itemSelector: '.cards',
columnWidth: 200 //this is an example.
});
Since masonry is responsive, you can forget about skeleton for this part.
I am trying to set up a section of a website to have a column of text, a long vertical picture, and another column of text on the other side of the picture. I have been able to achieve the look I want but only by using a negative top margin(not shown in this example).
The code I have tried is here
http://www.bootply.com/3hKEyWGlJp
You don't need the extra row since a new row will create a new block below the previous row. It's how CSS grids work (Bootstrap in your example). Just put the content of step 1/2 in left column, div in center column and step 3/4 content in right column.
<div class="row">
<div class="col-md-3 col-md-offset-1">
<p class="lead text-left">Step 1: asdf asdf asdf </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce blandit, dolor at..</p>
<p class="lead">Step 2: Lorem ipsum dolor sit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce blandit, dolor at</p>
</div>
<div class="col-md-3">
<div class="phone"></div>
</div>
<div class="col-md-3">
<p class="lead text-left">Step 3:Lorem ipsum dolor sit</p>
<p>Start typing your address & we will give you a list of options to choose from.</p>
<p class="lead">Step 4: Lorem ipsum dolor sit</p>
<p>dsadsdad sddasd saddsd dasdsada sdasds d ds ads dadsd dasd sada sdasdsdd sads dadsdda sdsada sdasdsd</p>
</div>
</div>
Example: http://www.bootply.com/rCr1B4wiKD