Example Responsive CSS Grid Filled With Cards

1

Dotted around various threads in this forum there has been questions and comments about creating UIs in visual designers vs code, handling different layouts for different devices and also suggestions for which widget kit to use.

For those considering using a WebView below is a simple example demonstrating how you can use CSS Grids to make cards shift position to cater for different sized screens. Open in your browser, then resize the window to see the effect:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Radio Player</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<style>
/* layout */
html, body { 
    height: 100%;
    width:100%;
    margin: 0px;
    padding: 0px;
    background-color: #0D0D0D;
    overflow: hidden;
}
.app-grid {
    height: 100svh;
    display: grid; 
    grid-template-columns: 10px 1fr 10px;
    grid-template-rows: 40px 40px 1fr 20px; 
    grid-gap: 10px; 
    padding: 0px; 
    overflow: hidden;  
}
.grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* widget positions in the grid */
#app-title { grid-column: 2; grid-row: 1; color: white; }
#audio-player { grid-column: 2; grid-row: 2; height:35px; width:100%; }
#station-list { grid-column: 2; grid-row: 3; }

/* styling for the cards */
.card {
    background-color: #171717;
    border: 2px solid #444;
    border-radius: 12px;
    cursor: pointer;
    padding: 15px 10px 15px 10px;
}
.card:hover {
    background-color: #333;
}
.card-title {
    color: white;
    font-family: "Raleway", sans-serif;
    font-size: 14px;
    font-weight: 600;
}

/* the container that cards are added to */
/* this grid is where the real magic happens */
.container {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-auto-rows: max-content; 
    grid-gap: 5px; 
    overflow-x: hidden;
    overflow-y: auto; 
    scrollbar-width: thin;   
}
</style>

<body>
 
<div class="app-grid">
    <h1 id="app-title" class="grid-item">Radio Player</h1>
    
    <!-- Audio Player -->
    <audio id="audio-player" class="grid-item" controls>
        <source id="audio-source" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio> 
    
    <!-- List of Radio Stations (cards dynamically inserted here) -->
    <div id="station-list" class="container"></div>
</div>

<script>

listStations = function() {  
    // the radio stations data...
    // you'd probably get these using fetch
    const stations = [
        ['Capital', 'https://media-ice.musicradio.com/CapitalMP3'],
        ['Classic FM', 'https://media-ice.musicradio.com/ClassicFMMP3'],
        ['Dance FM', 'https://stream.zeno.fm/cygwwun7a5zuv'],
        ['K-Rock', 'https://crystalout.surfernetwork.com:8001/KMKF_MP3'],
        ['Soma FM - Underground Eighties', 'https://ice6.somafm.com/u80s-128-mp3'],
        ['Star FM - Alternative Rock', 'https://stream.starfm.de/alternat/mp3-192/'],
        ['Star FM - Rock Ballads', 'https://stream.starfm.de/ballads/mp3-128/'],
    ];
    const stationListDiv = document.getElementById('station-list');
    
    // loop through stations and create a card for each
    stations.forEach(station => {
        const card = document.createElement('div');
        card.classList.add('card');
        
        // for this demo our card design is very simple
        card.innerHTML = `
            <div class="card-title">${station[0]}</div>
        `;

        // add a click handler to play the selected radio station
        card.addEventListener('click', () => {
            const audioPlayer = document.getElementById('audio-player');
            const audioSource = document.getElementById('audio-source');
            audioSource.src = station[1];  // The stream URL from the station data
            audioPlayer.load();  // Load the new station URL
            audioPlayer.play();  // Start playing the station
        });

        // append the card to the station list container
        stationListDiv.appendChild(card);
    });
};

listStations();
</script>

</body>

</html>
2 Likes