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

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

.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:
  		"message message"
    	"pricing pricing"
    	"user address"
			"method method"
    	"payment payment"
    	"submit submit";
}

.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_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_submit {
	-ms-grid-row: 5;
	-ms-grid-column: 1;
	-ms-grid-column-span: 3;
	grid-area: submit;
}