Equal width columns in CSS Grid.

CSS-List-Grid-Columns.md

List Grid Columns

Equal width columns in CSS Grid.

<style>
.item-header {
	/* grid */
	display: grid;
	gap: 0em;

	margin-bottom: 10px;
	overflow: hidden;
	transition: all 0.6s;
	border-bottom: 1px dashed #eee;
}

.item {
	/* grid */
	display: grid;
	gap: 0em;
	align-items: center;
  
	padding: 10px;
	margin-block: 5px;
	overflow: hidden;
	transition: all 0.3s;
}

.item:hover {
	color: #fff;
	background: #ffd85f;
}

.field {
	padding: 10px;
	align-self: center;
}

.field-last {
	text-align: right;
}

@media all and (min-width: 640px) {
	.item,
	.item-header {
		/* grid */
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		grid-template-columns: auto repeat(1, 1fr) repeat(1, 1fr) auto;
		/* grid-template-columns: repeat(4, minmax(0, 1fr)); */
	}
	.field {
		padding: 20px;
	}
}
</style>

<template>
<div class="list">
  <div class="item-header">
    <div class="field">{{ $t('ID') }}</div>
    <div class="field">{{ $t('Amount') }}</div>
    <div class="field">{{ $t('Created') }}</div>
    <div class="field field-last">{{ $t('Actions') }}</div>
  </div>
  <div class="items">  
    <div class="item" :class="'list-item' + i.id" v-for="i in store.list">
      <div class="field">{{ i.id }}</div>
      <div class="field">{{ i.amount }}</div>
      <div class="field">{{ i.created_at }}</div>
      <div class="field field-last">
        <RouterLink :to="'/admin/targets/edit/' + i.id" class="list-action">
          <i class="fa-solid fa-edit"></i>
        </RouterLink>
        <span @click="store.deleteItem(i.id)" class="list-action">
          <i class="fa-solid fa-trash"></i>
        </span>
      </div>
    </div>
  </div>

  <NoRecords :show="store.list.length == 0" />
</div>