Custom CSS for Membership Checkout page with Payment Method Select using CSS Grid: 2 Column Layout for "Account Information" and "Billing Information" sections (with conditionals)

pmpro-columns-grid-payment-method-select-checkout.css

<?php   // do not copy this line.
/**
 * This recipe adds custom CSS for non-logged in users on screens larger then 768px.
 * 
 * You can add this recipe to your site by creating a custom plugin
 * or using the Code Snippets plugin available for free in the WordPress repository.
 * Read this companion article for step-by-step directions on either method.
 * https://www.paidmembershipspro.com/create-a-plugin-for-pmpro-customizations/
 */


function load_css_for_level_checkout(){
	
	if ( is_user_logged_in() ) { ?>          
	<style type="text/css"> 
		
    </style>
    <?php } else{
		?>
				/* Add Custom CSS below */
		<style type="text/css">

			@media screen and (min-width: 768px) {

			.pmpro-checkout .pmpro_form {
			display: -ms-grid;
			display: grid;
			grid-column-gap: 1em;
			-ms-grid-columns: 1 1em 1;
			grid-template-columns: 1 1;
			grid-template-areas:
				
				"pricing pricing"
				"user address"
				"method method"
				"payment payment" 
				"message message"
				"submit submit";
		}

		
		.pmpro-checkout .pmpro_form #pmpro_pricing_fields {
			-ms-grid-row: 2;
			-ms-grid-column: 1;
			-ms-grid-column-span: 3;
			grid-area: pricing;
		}

		.pmpro-checkout .pmpro_form #pmpro_user_fields {
			-ms-grid-row: 3;
			-ms-grid-column: 1;
			grid-area: user;
		}

		.pmpro-checkout .pmpro_form #pmpro_billing_address_fields {
			-ms-grid-row: 3;
			-ms-grid-column: 3;
			grid-area: address;
		}

		.pmpro-checkout .pmpro_form #pmpro_payment_information_fields {
			-ms-grid-row: 4;
			-ms-grid-column: 1;
			-ms-grid-column-span: 3;
			grid-area: payment;
		}
		.pmpro-checkout .pmpro_form #pmpro_payment_method {
			-ms-grid-row: 5;
			-ms-grid-column: 1;
			-ms-grid-column-span: 3;
			grid-area: method;
		}
		.pmpro-checkout .pmpro_form .pmpro_check_instructions{
			-ms-grid-row: 5;
			-ms-grid-column: 1;
			-ms-grid-column-span: 3;
			grid-area: checkpay;
		}		
		
		.pmpro-checkout .pmpro_form .pmpro_message {
			-ms-grid-row: 1;
			-ms-grid-column: 1;
			-ms-grid-column-span: 3;
			grid-area: message;
		}
				
		.pmpro-checkout .pmpro_form .pmpro_submit {
			-ms-grid-row: 5;
			-ms-grid-column: 1;
			-ms-grid-column-span: 3;
			grid-area: submit;
		}
		
		
		}
	</style>
		<?php
	}
}
add_action( 'wp_footer', 'load_css_for_level_checkout', 10 );