Develop Reference

Table with CSS Grid: give all columns of same type width of entry with widest content?

I have the following table design, laid out with CSS Grid (see first snippet).
Is it possible to make all columns of the same type/class (e.g. .Table_col_day) as wide as the column of that type/class with the widest content, with CSS/without JS? The solution doesn’t have to be CSS Grid based.
See the second code snippet for a quick JS-based solution, to illustrate what I'd like to do.
.Table__row {
background-color: plum;
display: grid;
grid-template-columns: 0.5fr 0.5fr 1fr;
}
.Table__row:nth-of-type(even) {
background-color: lime;
}
<div class="Table">
<div class="Table__row">
<div class="Table__day">Mon</div>
<div class="Table__time">10am</div>
<div class="Table__title">Some event</div>
</div>
<div class="Table__row">
<div class="Table__day">Tue</div>
<div class="Table__time">12:30pm</div>
<div class="Table__title">Another event</div>
</div>
<div class="Table__row">
<div class="Table__day">Wed</div>
<div class="Table__time">9:00am</div>
<div class="Table__title">A different event</div>
</div>
</div>
Javascript-based solution (determine widest column content, then manually set grid column styles of row element)
function resizeColumns(SELECTOR) {
const colElements = document.querySelectorAll(SELECTOR);
//////
const widths = [...colElements].map(el => el.querySelector('span').offsetWidth);
const width_max = Math.max(...widths);
//////
for(let col of colElements) {
col.parentNode.style.gridTemplateColumns = `${width_max}px 0.5fr 1fr`;
}
}
resizeColumns('.Table__col_day');
.Table__row {
background-color: plum;
display: grid;
grid-template-columns: 0.5fr 0.5fr 1fr;
}
.Table__row:nth-of-type(even) {
background-color: lime;
}
<div class="Table">
<div class="Table__row">
<div class="Table__col_day">
<span>Mon</span>
</div>
<div class="Table__col_time">
<span>10am</span>
</div>
<div class="Table__col_title">
<span>Some event</span>
</div>
</div>
<div class="Table__row">
<div class="Table__col_day">
<span>Tue</span>
</div>
<div class="Table__col_time">
<span>12:30pm</span>
</div>
<div class="Table__col_title">
<span>Another event</span>
</div>
</div>
<div class="Table__row">
<div class="Table__col_day">
<span>Wed</span>
</div>
<div class="Table__col_time">
<span>9:00am</span>
</div>
<div class="Table__col_title">
<span>A different event</span>
</div>
</div>
</div>

You said it at the beginning: "table design" so use table
.Table {
display: table;
width: 100%;
}
.Table__row {
background-color: plum;
display: table-row;
}
.Table__row > * {
display: table-cell;
white-space: nowrap;
}
.Table__row > *:not(.Table__day) {
width: 50%;
}
.Table__row:nth-of-type(even) {
background-color: lime;
}
<div class="Table">
<div class="Table__row">
<div class="Table__day">Mon</div>
<div class="Table__time">10am</div>
<div class="Table__title">Some event</div>
</div>
<div class="Table__row">
<div class="Table__day">Tue</div>
<div class="Table__time">12:30pm</div>
<div class="Table__title">Another event</div>
</div>
<div class="Table__row">
<div class="Table__day">Wed</div>
<div class="Table__time">9:00am</div>
<div class="Table__title">A different event</div>
</div>
</div>
Or consider display:contents if you want to keep display:grid;
.Table {
display: grid;
grid-template-columns: auto 1fr 1fr;
}
.Table__row {
display: contents;
}
.Table__row > * {
background-color: plum;
}
.Table__row:nth-of-type(even) > * {
background-color: lime;
}
<div class="Table">
<div class="Table__row">
<div class="Table__day">Mon</div>
<div class="Table__time">10am</div>
<div class="Table__title">Some event</div>
</div>
<div class="Table__row">
<div class="Table__day">Tue</div>
<div class="Table__time">12:30pm</div>
<div class="Table__title">Another event</div>
</div>
<div class="Table__row">
<div class="Table__day">Wed</div>
<div class="Table__time">9:00am</div>
<div class="Table__title">A different event</div>
</div>
</div>

Only change class in this scope

I have a card which has onclick change functionality.
If I include two of these cards on my page, the classes will duplicate. But it's also changing the class in the second card when a change occurs in the first and vice versa.
Here is a demo:
$('div[data-item="item--1"]').addClass('active');
$('.header').click(function() {
var myEm = $(this).attr('data-item');
$('.header, .subheader').removeClass('active');
$('.header[data-item = '+myEm+'], .subheader[data-item = '+myEm+']').addClass('active');
});
.card{
display: flex;
flex-direction: column;
padding: 30px;
background: lightblue;
}
.headers{
padding: 20px;
margin-bottom: 40px;
}
.header{
cursor: pointer;
opacity: 0.4;
}
.header.active{
opacity: 1;
}
.subheader{
display: none;
padding: 0px 20px;
}
.header.active,
.subheader.active{
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<div class="card">
<div class="headers">
<div class="header" data-item="item--1">Test</div>
<div class="header" data-item="item--2">Test 2</div>
</div>
<div class="subheaders">
<div class="subheader" data-item="item--1">Subheader for Test</div>
<div class="subheader" data-item="item--2">Subheader for Test 2</div>
</div>
</div>
<div class="card">
<div class="headers">
<div class="header" data-item="item--1">Another Test</div>
<div class="header" data-item="item--2">Another Test 2</div>
</div>
<div class="subheaders">
<div class="subheader" data-item="item--1">Subheader for Another Test</div>
<div class="subheader" data-item="item--2">Subheader for Another Test 2</div>
</div>
</div>
How can I prevent this?

You can pass the closest .card ancestor as the context of the selectors.
$('.header').click(function() {
var myEm = $(this).attr('data-item');
$('.header, .subheader', $(this).closest('.card')).removeClass('active');
$('.header[data-item = '+myEm+'], .subheader[data-item = '+myEm+']',
$(this).closest('.card')).addClass('active');
});
Live Example:
$('div[data-item="item--1"]').addClass('active');
$('.header').click(function() {
var myEm = $(this).attr('data-item');
$('.header, .subheader', $(this).closest('.card')).removeClass('active');
$('.header[data-item = '+myEm+'], .subheader[data-item = '+myEm+']', $(this).closest('.card')).addClass('active');
});
.card{
display: flex;
flex-direction: column;
padding: 30px;
background: lightblue;
}
.headers{
padding: 20px;
margin-bottom: 40px;
}
.header{
cursor: pointer;
opacity: 0.4;
}
.header.active{
opacity: 1;
}
.subheader{
display: none;
padding: 0px 20px;
}
.header.active,
.subheader.active{
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<div class="card">
<div class="headers">
<div class="header" data-item="item--1">Test</div>
<div class="header" data-item="item--2">Test 2</div>
</div>
<div class="subheaders">
<div class="subheader" data-item="item--1">Subheader for Test</div>
<div class="subheader" data-item="item--2">Subheader for Test 2</div>
</div>
</div>
<div class="card">
<div class="headers">
<div class="header" data-item="item--1">Another Test</div>
<div class="header" data-item="item--2">Another Test 2</div>
</div>
<div class="subheaders">
<div class="subheader" data-item="item--1">Subheader for Another Test</div>
<div class="subheader" data-item="item--2">Subheader for Another Test 2</div>
</div>
</div>

how to sort and move elements inside a grid

el should be movable:
up and down - inside the parent - so columns should be sortable
and left-right - from one column to another
Any help
$("#cola, #colb, #colc, #cold").sortable({
containment: "parent"
});
$("#cola, #colb, #colc, #cold").droppable();
$('.el').draggable({
});
.grid{
display:grid;
grid-template-columns:1fr 1fr 1fr 1fr;
width:50%;
}
.col{
height:100vh;
overflow-y:scroll;
}
.el{
line-height:25px;
text-align:center;
cursor:pointer;
margin:14px 0;
background:gold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class='grid'>
<div class='col' id='cola'>
<div class='el'>A</div>
<div class='el'>A</div>
<div class='el'>A</div>
</div>
<div class='col' id='colb'>
<div class='el'>B</div>
<div class='el'>B</div>
<div class='el'>B</div>
</div>
<div class='col' id='colc'>
<div class='el'>C</div>
<div class='el'>C</div>
<div class='el'>C</div>
</div>
<div class='col' id='cold'>
<div class='el'>D</div>
<div class='el'>D</div>
<div class='el'>D</div>
</div>
</div>

I think you're over complicating it. Here is a basic sortable, you will want to use items and connectWith options.
$(".col").sortable({
containment: ".grid",
items: "> div.el",
connectWith: ".col"
});
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
width: 50%;
}
.col {
height: 100vh;
overflow-y: scroll;
}
.el {
line-height: 25px;
text-align: center;
cursor: pointer;
margin: 14px 0;
background: gold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class='grid'>
<div class='col' id='cola'>
<div class='el'>A-1</div>
<div class='el'>A-2</div>
<div class='el'>A-3</div>
</div>
<div class='col' id='colb'>
<div class='el'>B-1</div>
<div class='el'>B-2</div>
<div class='el'>B-3</div>
</div>
<div class='col' id='colc'>
<div class='el'>C-1</div>
<div class='el'>C-2</div>
<div class='el'>C-3</div>
</div>
<div class='col' id='cold'>
<div class='el'>D-1</div>
<div class='el'>D-2</div>
<div class='el'>D-3</div>
</div>
</div>

How to Let Float Items Split the Blank Area in Average?

Please run this demo:
.app {
background:pink;
width: 90vw;
overflow: hidden;
}
.app__item {
background: lightblue;
width: 200px;
float :left;
margin:5px;
height: 40px;
}
.app__item:last-child {
float: right;
}
.app__item--size2 {
height: 90px;
}
<div class="app">
<div class="app__item app__item--size2">1</div>
<div class="app__item">2</div>
<div class="app__item">3</div>
<div class="app__item">4</div>
<div class="app__item">5</div>
<div class="app__item">6</div>
<div class="app__item">7</div>
<div class="app__item">8</div>
<div class="app__item">9</div>
<div class="app__item">10</div>
<div class="app__item">
<button>search</button>
</div>
</div>
Please notice the red color text which is what I want:
How to Let Float Items Split the Blank Area in Average?
This gif point out what I want and also the reason why I am using float layout.
If using flex, the result would be
.app {
background:pink;
width: 80vw;
display: flex;
flex-flow: row wrap;
}
.app__item,
.app__item_wrapper {
margin:5px;
width: 200px;
flex: 0 0 auto;
}
.app__item {
background: lightblue;
height: 40px;
}
.app__item_wrapper {
display: flex;
flex-flow: column;
justify-content: space-between;
}
.app__item--size2 {
height: 90px;
}
.app__item--inner {
margin:0;
flex: 0 0 auto;
}
<div class="app">
<div class="app__item app__item--size2">1</div>
<div class=" app__item_wrapper app__item--size2">
<div class="app__item app__item--inner">2</div>
<div class="app__item app__item--inner">3</div>
</div>
<div class=" app__item_wrapper app__item--size2">
<div class="app__item app__item--inner">4</div>
<div class="app__item app__item--inner">5</div>
</div>
<div class="app__item">6</div>
<div class="app__item">7</div>
<div class="app__item">8</div>
<div class="app__item">
<button>search</button>
</div>
</div>
And the con is that it won't work well when viewport is changing. See this:
and this is the con:

If I understand correctly, you're wanting the cells to the right of "cell 1" to stretch-to-fill the reaming horizontal space of the enclosing div (with pink background).
You could use CSS Grid to achieve this as shown below:
.app {
background:pink;
width: 90vw;
padding:5px;
display:grid;
/* Cause first column with to be 200px, remaining two columns
to scale to fit remaining width */
grid-template-columns: 200px repeat(2, 1fr);
/* Set spacing between cells */
grid-gap:10px;
}
.app__item {
background: lightblue;
width: 100%;
height: 40px;
}
.app__item--size2 {
/* Cause top left cell to occupy two rows */
grid-row: 1 / 3;
height:100%;
}
<div class="app">
<div class="app__item app__item--size2">1</div>
<div class="app__item">2</div>
<div class="app__item">3</div>
<div class="app__item">4</div>
<div class="app__item">5</div>
<div class="app__item">6</div>
<div class="app__item">7</div>
<div class="app__item">8</div>
<div class="app__item">9</div>
<div class="app__item">10</div>
<div class="app__item">
<button>search</button>
</div>
</div>

Thank #Dacre Denny for giving me inspiration. Finally, I got it.
.app {
background:pink;
width: 90vw;
padding:5px;
display:grid;
grid-template-columns: repeat(auto-fit,200px);
justify-content:space-evenly;
grid-gap: 5px;
}
.app__item {
background: lightblue;
width: 200px;
height: 40px;
}
.app__item--size2 {
/* Cause top left cell to occupy two rows */
grid-row: 1 / 3;
height:100%;
}
.app__item:last-child {
grid-column-end: -1
}
<div class="app">
<div class="app__item app__item--size2">1</div>
<div class="app__item">2</div>
<div class="app__item">3</div>
<div class="app__item">4</div>
<div class="app__item">5</div>
<div class="app__item">6</div>
<div class="app__item">7</div>
<div class="app__item">8</div>
<div class="app__item">9</div>
<div class="app__item">10</div>
<div class="app__item">
<button>search</button>
</div>
</div>
See this gif when viewport is changing.

Add class to div on scroll up and down

As you can see I have a number of dots lined vertically! On scrolling down it works, as one scrolls the next dot gets a class thats chnages the style of the ball, I want the exact same to happen when i scroll up but it is not working! Please any input is appreciated!
Here is a code pen for your reference!
below the html, css and javascript:
var activeMilestone = function() {
var milestoneBalls = $('.dot');
milestoneBalls[0].classList.add("active");
window.onscroll = function() {
milestoneBalls.each(function(i, v) {
var thisBall = $(this);
var nextBall = milestoneBalls[i + 1];
var prevBall = milestoneBalls[i - 1];
var thisPositionTop = thisBall.offset().top + ($(this).parent().height() / 3);
var winScroll = window.scrollY;
if (thisPositionTop <= winScroll) {
nextBall.classList.add("active");
thisBall.addClass("inactive");
}
if (thisPositionTop >= winScroll) {
//this.classList.add("inactive_ball");
}
});
}
}
$(document).ready(activeMilestone);
.wrapper {
height: 1000px;
background-color: wheat;
}
.info_wrapper {
margin-top: 70px;
}
.container {
height: 50%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.dot {
width: 30px;
height: 30px;
border-radius: 20px;
background-color: maroon;
border: solid 4px green;
}
.active {
border: solid 4px yellow;
background-color: red;
}
.inactive {
background-color: maroon;
border: solid 4px green;
}
.text {}
.header {
width: 100%;
height: 50px;
background-color: lightblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="header"></div>
<div class="container">
<div class="info_wrapper">
<div class="text"></div>
<div class="dot "></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot "></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot "></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
</div>
</div>

So this logic performs the same that you were doing already. With the added logic of, if the element should not advance, and we are not the first element, we check to see if the previous ball should be active. And if so, we make it active.
var activeMilestone = function() {
var milestoneBalls = $('.dot');
milestoneBalls.eq(0).addClass('active');
window.addEventListener('scroll', function() {
var activeBall = milestoneBalls.filter('.active');
var activeBallIndex = milestoneBalls.index( activeBall );
var activeBallPositionTop = activeBall.offset().top + (activeBall.parent().height() / 3);
if (activeBallPositionTop <= window.scrollY) {
activeBall.removeClass('active');
milestoneBalls.eq( activeBallIndex + 1).addClass('active');
} else if ( activeBallIndex ) {
var previousBall = milestoneBalls.eq( activeBallIndex - 1 );
var previousBallPositionTop = previousBall.offset().top + (previousBall.parent().height() / 3);
if (previousBallPositionTop > window.scrollY) {
activeBall.removeClass('active');
previousBall.addClass('active');
}
}
});
}
$(document).ready(activeMilestone);
.wrapper {
height: 1000px;
background-color: wheat;
}
.info_wrapper {
margin-top: 70px;
}
.container {
height: 50%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.dot {
width: 30px;
height: 30px;
border-radius: 20px;
background-color: maroon;
border: solid 4px green;
}
.active {
border: solid 4px yellow;
background-color: red;
}
.inactive {
background-color: maroon;
border: solid 4px green;
}
.text {}
.header {
width: 100%;
height: 50px;
background-color: lightblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="header"></div>
<div class="container">
<div class="info_wrapper">
<div class="text"></div>
<div class="dot "></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot "></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot "></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
<div class="info_wrapper">
<div class="text"></div>
<div class="dot"></div>
</div>
</div>
</div>

You can use on wheel from jQuery.
$(window).on('wheel',function(e) {
var mov = e.originalEvent.deltaY;
if(mov > 0) {
alert("up");
}else {
alert("down");
}
});
This will sort out your problem regarding detection of scrolling direction.