Source code for https://victorfont.com/customize-the-genesis-header-with-css-grid-layout/

actions.php

<?php

remove_action( 'genesis_site_title', 'genesis_seo_site_title' );
remove_action( 'genesis_site_description', 'genesis_seo_site_description' );
add_action( 'genesis_site_title', '__return_null' );
add_action( 'genesis_site_description', '__return_null' );

demo-grid-stretch.css

.css-grid-demo-container-stretch {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 50px);
    grid-gap: 20px;
}

.css-grid-demo-container-stretch div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: 1px solid #000;
}

.css-grid-demo-container-stretch .stretch-div {
    grid-column-start: 1;
    grid-column-end: -1;
}

.css-grid-demo-container-stretch .fill-space {
    grid-column-start: 3;
    grid-column-end: -1;
}

demo-grid-stretch.html

<div class="css-grid-demo-container-stretch">
  <div class="stretch-div">1</div>
  <div>2</div>
  <div>3</div>
  <div class="fill-space">4</div>
</div>

demo-grid.css

.css-grid-demo-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(1, 50px);
    grid-gap: 20px;
}

.css-grid-demo-container div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: 1px solid #000;
}

demo-grid.html

<div class="css-grid-demo-container">
    <div>1</div>
    <div>2<div>
    <div>3</div>
    <div></div>
</div>

feature-query-site-header.css

.site-header > .wrap {
	padding: 20px 0;
}

@supports(display: grid) {
    
    .site-header > .wrap {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-gap: 20px;
    }
    
    
    .site-header > .wrap:before,
    .site-header > .wrap:after {
    	content: none;
    	display: none;
    }
}

feature-query.css

@supports(display: grid) {
/* place your display: grid CSS here */
}

grid1.css

.site-header > .wrap {
	padding: 20px 0;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 20px;
}

site-header-wrap.css

.site-header > .wrap {
	padding: 20px 0;
}

@supports(display: grid) {
    
    .site-header > .wrap {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-gap: 20px;
    }
    
    
    .site-header > .wrap:before,
    .site-header > .wrap:after {
    	content: none;
    	display: none;
    }
}