Render Javascript as CSS GRID instead of LIST

Question

I'd like to render my Javascript as a CSS grid instead of a list for responsive purposes. Here is my current javascript code. By the way, I am very new to javascript (just two days in) so if you guys have any tips on how I can optimize and/or cleanup this function that would be very much appreciated!

// RESULT LIST - Create element and render from javascript

const resultList = document.querySelector('#horseList') 

function renderResult(doc){
    let li = document.createElement('li');
    li.setAttribute('data-id', doc.id);

    var resultDiv = document.createElement('div');
    resultDiv.className = ('result');

    var resultImage = document.createElement('div');
    resultImage.className = ('data-image');

    var resultFooter = document.createElement('div');
    resultFooter.className = ('result-footer');

    var resultText = document.createElement('div');
    resultText.className = ('results-text');

    var resultButton = document.createElement('button');
    resultButton.className = ('button tiny w-button');
    resultButton.innerHTML = "View";

    //Render text from database inside H5
    const string = (`${doc.data().name}, ${doc.data().age} | ${doc.data().type}`);
    let resultOne = document.createElement('h5');
    let price = document.createElement('h5');
    resultOne.className = ('data-text');
    price.className = ('data-text');
    price.textContent = doc.data().price;
    resultOne.textContent = string;

    resultList.appendChild(li);
        li.appendChild(resultDiv);
            resultDiv.appendChild(resultImage);
            resultDiv.appendChild(resultFooter);
                resultFooter.appendChild(resultText);
                resultFooter.appendChild(resultButton);
                    resultText.appendChild(resultOne);
                    resultText.appendChild(price);
}

//connect to database & get data
const db = firebase.firestore();
db.collection("Horses").get().then(function(querySnapshot) {

    querySnapshot.forEach(function(doc) {
        // doc.data() is never undefined for query doc snapshots
        renderResult(doc);
    });
})
.catch(function(error) {
    console.log("Error getting documents: ", error);
});

This is what I would like to create on the front end using GRID

<div class="container colour w-container">
<div class="results-display">
  <div class="header">
    <h2 class="h2">Featured Stables</h2>
    <h2 class="h2 black">In <span class="text-span-2">New Westminster</span>, <span class="text-span-3">British Columbia</span></h2>
  </div>
  <div class="w-layout-grid grid">
    <div class="result div-block">
      <div class="data-image"></div>
      <div class="result-footer">
        <div class="results-text">
          <h5 class="data-text">Taffy, 8 | Arabian</h5>
          <h5 class="data-text">$12,000</h5>
        </div><a href="https://webflow.com/website/Webflow-Cloneable-Template-CLONE?rfsn=1238427.48b8d&amp;subid=template002" target="_blank" class="button tiny w-button">View</a></div>

Have you looked into using CSS grid? I think that would simplify things a bit — itsanewabstract
– itsanewabstract, Commented Jun 25, 2020 at 2:46

Tanner Dolby · Accepted Answer · 2020-06-25 06:38:38Z

1

I would recommend using CSS Grid for this type of card/tile layout. My answer is updated to reflect HTML that your client-side JS would generate, with a few grid items added for visualization. This should be a good starting point.

html, body {
    margin: 0;
    padding: 0;
    height: 100vh;
}

h2 {
  margin: 5px;
}

.container {
    width: 100%;
    height: 100vh;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 10px;
}

.result {
    height: 120px;
    padding: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border: 1px solid #000;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Horse List</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="container">
            <div class="results-display">
                <div class="header">
                    <h2>Featured Stables</h2>
                    <h2>In <span class="text-span-2">New Westminster</span>, <span class="text-span-3">British Columbia</span></h2>
                </div>
                <div class="grid">
                    <div class="result">
                        <div class="data-image"></div>
                        <div class="result-footer">
                            <div class="results-text">
                                <h5 class="data-text">Taffy, 8 | Arabian</h5>
                                <h5 class="data-text">$12,000</h5>
                            </div>
                            <a href="https://webflow.com/website/Webflow-Cloneable-Template-CLONE?rfsn=1238427.48b8d&amp;subid=template002" target="_blank" class="button tiny w-button">View</a>
                        </div>
                    </div>
                    <div class="result">
                        <div class="data-image"></div>
                        <div class="result-footer">
                            <div class="results-text">
                                <h5 class="data-text">Taffy, 8 | Arabian</h5>
                                <h5 class="data-text">$12,000</h5>
                            </div>
                            <a href="https://webflow.com/website/Webflow-Cloneable-Template-CLONE?rfsn=1238427.48b8d&amp;subid=template002" target="_blank" class="button tiny w-button">View</a>
                        </div>
                    </div>
                    <div class="result">
                        <div class="data-image"></div>
                        <div class="result-footer">
                            <div class="results-text">
                                <h5 class="data-text">Taffy, 8 | Arabian</h5>
                                <h5 class="data-text">$12,000</h5>
                            </div>
                            <a href="https://webflow.com/website/Webflow-Cloneable-Template-CLONE?rfsn=1238427.48b8d&amp;subid=template002" target="_blank" class="button tiny w-button">View</a>
                        </div>
                    </div>
                    <div class="result">
                        <div class="data-image"></div>
                        <div class="result-footer">
                            <div class="results-text">
                                <h5 class="data-text">Taffy, 8 | Arabian</h5>
                                <h5 class="data-text">$12,000</h5>
                            </div>
                            <a href="https://webflow.com/website/Webflow-Cloneable-Template-CLONE?rfsn=1238427.48b8d&amp;subid=template002" target="_blank" class="button tiny w-button">View</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

edited Jun 25, 2020 at 6:38

answered Jun 25, 2020 at 3:31

Tanner Dolby

4,5013 gold badges12 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Bailey Fisher Over a year ago

My question was more asking what javascript would I need to generate said CSS grid. If you could help with that, that would be awesome!

Tanner Dolby Over a year ago

I can put some JS together to virtually create and bind DOM elements for a simple CSS grid with dummy values tonight, but you can take it from there to connect your firestore etc.

Bailey Fisher Over a year ago

That would be perfect! I just need to figure out how to create a CSS grid in dom from Javascript.

Bailey Fisher Over a year ago

It turns out CSS grid is a css property, so I can scrap the list entirely and just create a div and add the grid style. I did run into an issue with this though and created a new question: stackoverflow.com/questions/62586464/…

Tanner Dolby Over a year ago

Yes, display: grid is a CSS property. Feel free to upvote my answer here if it provided you any help in using CSS Grid. I will take a look at your new question.

Collectives™ on Stack Overflow

Render Javascript as CSS GRID instead of LIST

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related