Select CSS grid column inside one specific element

I'm working on a comparison chart and I need to ensure that the first column stays fixed to the left and the last row remains at the bottom of the view. This must be done while maintaining the width of columns and height of rows adjacent to them.

Each row should adjust its height based on the content in the cells with the maximum data. Below is a basic version illustrating what I have set up so far (please excuse the repetition of 

<div class="items">
as it was necessary to demonstrate the sticky footer):

* {
  box-sizing: border-box;
}

body {
  overflow: hidden;   
}

.container {
  overflow: auto;
  height: calc(100vh - 80px);
  margin-top: 80px;
  padding-left: 15px;
}

.heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  height: 80px;
  z-index: 1;
  background: white;
  right: 0;
  padding: 15px;
} 

.compare {
  width: max-content;
}

.grid {
  display: grid;
  position: relative;
  grid-template-columns: repeat(6, 300px);
  align-items: stretch;
}

.item {
  padding: 10px;
}

.title {
  position: sticky;
  left: 0;
  background-color: red;
}

.section span {
  position: sticky;
  left: 0;
  background-color: green;
}

.footer {
  position: sticky;
  bottom: 0;
  background: yellow;
}

// To highlight the problem I'm trying to solve

.item:nth-child(3),
.item:nth-child(9),
.item:nth-child(15),
.item:nth-child(21) {
  border: 1px dashed blue;
  border-top: none;
  border-bottom: none;
}

.item:nth-child(3) {
  border-top: 1px dashed blue;
}

.item:nth-child(21) {
  border-bottom: 1px dashed blue;
}
<div class="container">
  <div class="heading">
    <h1>Compare</h1>
    <button>Back</button>
  </div>
  <div class="compare">
      <div class="section">
        <span>Section title</span>
      </div>
      <div class="grid">
        <div class="item title">Key</div>
        <div class="item">Value</div>
        <div class="item">Value</div>
        <div class="item">Value</div>
        <div class="item">Value</div>
        <div class="item">Value</div>
        <div class="item title">Key</div>
        <div class="item">Value</div>
        <div class="item">Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value </div>
        <div class="item">Value</div>
        <div class="item">Value</div>
        <div class="item">Value</div>
        <div class="item title">Key</div>
        <div class="item">Value</div>
        <div class="item">Value</div>
        <div class="item">Value</div>
        <div class="item">Value</div>
        <div class="item">Value</div>
        <div class="item title">Key</div>
        <div class="item">Value</div>
        <div class="item">Value</div>
        <div class="item">Value</div>
        <div class="item">Value</div>
        <div class="item">Value</div>
      </div>
      <div class="section">
        <span>Section title</span>
      </div>
      <div class="grid">
        <div class="item title">Key</div>
        <div class="item">Value</div>
        <div class="item">Value</div>
        <div class="item">Value</div>
        <div class="item">Value</div>
        <div class="item">Value</div>
        <div class="item title">Key</div>
        <div class="item">Value</div>
        <div class="item">Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value </div>
        <div class="item">Value</div>
        <div class="item">Value</div>
        <div class="item">Value</div>
        <div class="item title">Key</div>
        <div class="item">Value</div>
        <div class="item">Value</div>
        <div class="item">Value</div>
        <div class="item">Value</div>
        <div class="item">Value</div>
        <div class="item title">Key</div>
        <div class="item">Value</div>
        <div class="item">Value</div>
        <div class="item">Value</div>
        <div class="item">Value</div>
        <div class="item">Value</div>
      </div>
      <div class="section">
        <span>Section title</span>
      </div>
      <div class="grid">
        <div class="item title">Key</div>
        <div class="item">Value</div>
        <div class="item">Value</div>
        <div class="item">Value</div>
        <div class="item">Value</div>
        <div class="item">Value</div>
        <div class="item title">Key</div>
        <div class="item">Value</div>
        <div class="item">Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value Value </div>
        <div class="item">Value</div>
        <div class="item">Value</div>
        <div class="item">Value</div>
        <div class="item title">Key</div>
        <div class="item">Value</div>
        <div class="item">Value</div>
        <div class="item">Value</div>
        <div class="item">Value</div>
        <div class="item">Value</div>
        <div class="item title">Key</div>
        <div class="item">Value</div>
        <div class="item">Value</div>
        <div class="item">Value</div>
        <div class="item">Value</div>
        <div class="item">Value</div>
      </div>
    <div class="grid footer">
      <div class="item title">Key</div>
      <div class="item">CTA</div>
      <div class="item">CTA</div>
      <div class="item">CTA</div>
      <div class="item">CTA</div>
      <div class="item">CTA</div>
    </div>
  </div>
</div>

I want to implement drag-and-drop sorting for each column and keep each column within a single element (to target all 

<div class="items">
within e.g. 
<div class="col-2">...
). Is it feasible to achieve this using grid markup? Or would it be better to target each individual 
<div class="items">
that makes up a column with JavaScript?

htmlcsscss-selectorscss-gridcolumnsorting

Answer №1

In a grid layout, it is possible to enclose cells within a div using the display:contents property:

:root {
  --col-no: 1;
}

.wrapper {
  height: 300px;
  width: 100vw;
  display: grid;
  grid-template-columns: 100px repeat(6, 150px);
  grid-auto-flow: column;
  overflow: scroll;
}

.section {
  background-color: lightgreen;
}

.title {
  background-color: orange !important;
}

.col {
  /* disply contents */
  display: contents;
}

.col:nth-child(2n + 2)>* {
  background-color: #ddd;
}

.col:first-child>div {
  position: sticky;
  left: 0;
}

.col>* {
  grid-column: var(--col-no);
}

.footer {
  display: contents;
}

.footer>div {
  background-color: yellow;
  grid-row: 1000;
  position: sticky;
  bottom: 0;
}

.col:nth-child(1) {
  --col-no: 1;
}

.col:nth-child(2) {
  --col-no: 2;
}

.col:nth-child(3) {
  --col-no: 3;
}

.col:nth-child(4) {
  --col-no: 4;
}

.col:nth-child(5) {
  --col-no: 5;
}

.col:nth-child(6) {
  --col-no: 6;
}
<div class="wrapper">
  <div class="col">
    <div class="section">
      <span>Section title1</span>
    </div>
    <div class="item title">Key</div>
    <div class="item title">Key</div>
    <div class="item title">Key</div>
    <div class="item title">Key</div>
    <div class="section">
      <span>Section title2</span>
    </div>
    <div class="item title">Key</div>
    <div class="item title">Key</div>
    <div class="item title">Key</div>
    <div class="item title">Key</div>
    <div class="section">
      <span>Section title3</span>
    </div>
    <div class="item title">Key</div>
    <div class="item title">Key</div>
    <div class="item title">Key</div>
    <div class="item title">Key</div>
  </div>
  <div class="col">
    <div class="items"></div>
    <div class="items">value</div>
    <div class="items">value</div>
    <div class="items">value value value =</div>
    <div class="items">value</div>
    <div class="items"></div>
    <div class="items">value</div>
    <div class="items">value</div>
    <div class="items">value</div>
    <div class="items">value</div>
    <div class="items"></div>
    <div class="items">value</div>
    <div class="items">value</div>
    <div class="items">value</div>
    <div class="items">value</div>
  </div>

...


  <script>
    let cols = document.querySelectorAll('.col');
    cols.forEach(c => c.addEventListener('dragstart', () => {
      console.log('dragstarted')
    }));
  </script>

Through the manipulation of the .col elements, you can effectively control grid columns, and drag events are triggered on these elements as well.

  <script>
    let cols = document.querySelectorAll('.col');
    cols.forEach(c => c.addEventListener('dragstart', () => {
      console.log('dragstarted')
    }));
  </script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

displaying HTML on the web page only, without appearing in the text input field

update1: I have updated the image to provide better clarity https://i.sstatic.net/hYLsI.png I am currently working on implementing chip filters similar to Google Flights. When selecting "sports," it currently displays "sports1" and replaces "sports" with ...

javascripthtmlreactjsreduxmaterial-ui

How to apply CSS styling to a specific element using jQuery

When using $(".className"), all elements with the class .className are returned. How can I target a specific element by its index number to apply styling only to that element? <html> <head> <script src="https://ajax.googleapis.com/ajax ...

javascriptjquerycssjquery-uistyling

Encountering difficulty transforming DataFrame into an HTML table

I am facing difficulties incorporating both the Name and Dataframe variables into my HTML code. Here's the code snippet I have: Name = "Tom" Body = Email_Body_Data_Frame html = """\ <html> <head> </he ...

pythonhtmldataframevariables

"Unusual" symbols encountered during PDF file saving

I have a PDF file titled "SA Pias - Margaça Branco.pdf" that I need to access. Currently, I am using this link: href="SA Pias - Marga%E7a Branco.pdf" Although the file opens fine in the browser, when users try to save it, they see strange characters ins ...

htmlcharacter

What is the best way to utilize :focus while simultaneously applying properties through Javascript?

When styling an input element with JavaScript, it seems that any properties set this way are ignored in a :focus rule. An example is provided to illustrate this: Initially, the background and border of the input element matches the surrounding element ( ...

javascriptjquerycss

Incorporate a horizontally rotating preloader to enhance loading experience

I am currently in the process of developing a preloader that rotates an image horizontally. After researching different threads and ideas, I came across a solution that looks something like this: <style> .imageRotateHorizontal{ -moz-anima ...

htmlcssanimation

Experiencing difficulties and challenges with implementing addEventListener on a link tag

I have a task where I need to implement JavaScript on my website's navbar. The requirement is that when the second element of the navbar is clicked, it should change the name of the first element. I'm attempting to achieve this functionality by ...

javascripthtmlbootstrap-4addeventlistener

Can a local HTML page be embedded within another?

Suppose I have two HTML pages: index.html and embed.html. Within embed.html, there is an arbitrary HTML page that I want to embed inside index.html. I attempted the following: <!DOCTYPE html> <html lang="en"> <head> <me ...

htmlcssiframe

Can a footer be added to a webpage without using a wrapper DIV in CSS?

After extensively researching online, I have been on the lookout for a clever CSS-only technique to display a footer at the bottom of a page, even if there is minimal content. All the solutions I have come across involve utilizing a wrapper DIV with 100% ...

htmlcss

How can we use Selenium and xpath to choose the Email or Phone field on the Google Login Page?

Currently navigating to: Google Drive Login Interested in selecting this particular input field: https://i.sstatic.net/PfzvM.png When attempting to use the xpath of the input field: //*[@id="identifierId"] or /html/body/div[1]/div[1]/div[2 ...

pythonseleniumxpathcss-selectorsgoogle-home

Utilizing the Invision prototype for embedding

They provided me with this code snippet <iframe width="424" height="916" src="//invis.io/U5574OIA3" frameborder="0" allowfullscreen></iframe> However, I am unsure of how to properly embed it. I attempted to insert the line into my website but ...

htmlcssiframeembed

altering the number of columns in Bootstrap based on screen size to prevent stacking

Is there a way to use the 'col' classes without having them stack on top of each other? I have a form row that requires different numbers of columns on various screen sizes. <div class="form-row"> <div class="col-3"></div> ...

csstwitter-bootstrapbootstrap-4

How do I go about extracting and presenting the JSON data from the ESPN API?

In my current project, I am trying to utilize the jQuery library to work with API JSON data. Even though I am experienced in parsing JSON in PHP, I want to explore doing it with jQuery this time around. The goal is to extract information about each of the ...

javascriptjqueryhtmljson

What causes an increase in td width when using CSS background-color?

Here is an example of HTML structure: <table class="barby-barcode"> <tbody> <tr class="barby-row"> <td class="barby-cell on"></td> <td class="barby-cell on"></td> <td class="barby-cell o ...

htmlcss

IE rendering issue: jQuery image slideshow captions lack transparency

I recently created a slideshow using jQuery that features fading images with corresponding captions in individual divs. While the captions are meant to have a transparent appearance, I have encountered an issue specifically in Internet Explorer where this ...

jquerycssinternet-explorerslideshowopacity

What is the functionality of react.js state?

As I delve into learning React.js, I've been quite impressed with its state management capabilities. However, I'm curious about the technical workings behind it. Does React.js utilize cookies or browser storage for its state management? ...

javascripthtmlreactjs

The sign-up button mysteriously vanishes after the page is refreshed

I am encountering an issue with the sign up button during the user registration process. There is a checkbox for Terms & Conditions, and the button should only become enabled after checking this box. Everything seems to be functioning correctly, but when I ...

javascriptjqueryhtmlangularjs

Pull data from one array of objects using the id from another array to display in a list using AngularJS ng-repeat

After retrieving a list of options, I make an API call to validate each option. The goal is to display whether each option is valid or not. My starting array looks like: $scope.preValidationArray = [ { id: 1, description: 'Item 1' }, { id: 2 ...

javascripthtmlangularjs

Ways to position a child element at the center of its parent container?

Hey there, is there a way I can achieve this specific layout without relying on position: absolute? Flexbox would be the preferred method. The main goal here is to have the middle element horizontally centered within its parent element, regardless of other ...

htmlcss

Utilizing Python and Selenium to Locate an Element Based on Text Within a Span Class

My challenge is locating an element without any ID or distinctive identifiers. The HTML code structure resembles the following: <div class="item_select"> <span class="item_selection_number">A </span> </div> <div class="item_ ...

pythonhtmlcssseleniumautomation