CSS Grid row example with right aligned action

Todo List > CSS Grid row example with right aligned action

In this lesson we'll review an easy way to make a "table" using Grid. Starting with a styled.div, we'll use the display: grid styling to make this a grid. Then, using grid-template-columns, we'll set 1fr 100px. We want the first row to expand to as much as it needs, with the actions row only taking up 100px. With only these two CSS attributes, we've created a simple two column layout for each Task. Nice.

Additional attributes gap: 5x will ensure a gap of 5px is placed between each column. We'll need margin: 10px 0px to ensure each grid is vertically spaced apart from each other.

Your mission

Let's add some buttons to our actions container! First, turn the div with the Actions text into its own Styled-component- another Grid that contains two equal sized columns, each containing a button with a single emoji character.

Lesson 8/20

import styled from "styled-components";

const TaskName = styled.div``;

const TaskRow = styled.div`
  display: grid; 
  grid-template-columns: 1fr 100px; 
  gap: 5px; 
  margin: 10px 0px; 
  width: 100%;   
`;

function Task({ name }) {
  return (
    <TaskRow>
      <TaskName> {name} </TaskName>
      <div style={{ border: "1px solid black" }}> Actions </div>
    </TaskRow>
  );
}

export default Task;

Open Sandbox